How would I go about cancelling a query prefetch?

[ej-shafran]

I have some code like so:

function getDataFromServer(context) {
  return axios.get(`/url/${context.queryKey[1]}`, { signal });
}

function useMyQuery(n) {
  usePrefetchQuery({ queryKey: ["url", n-1], queryFn: getDataFromServer });
  usePrefetchQuery({ queryKey: ["url", n+1], queryFn: getDataFromServer });
  return useQuery({ queryKey: ["url", n], queryFn: getDataFromServer });
}

(My code is more complicated, but I think this suffices for an example)

So that users don't have to see loading when changing the n parameter. However, if a user spam-clicks the button that increases/decreases n, I don't want my server to be overwhelmed with requests. If I attempt to spam-click myself, I still see the requests in the network tab. Is this expected? Do I have to manually cancel prefetches? Or should I be solving this problem with something outside of React Query, such as with rate-limiting my server, etc.?

[TkDodo]

Do I have to manually cancel prefetches?

yep. queryClient.cancelQueries(...)