Force refetch

[denisborovikov]

Hi there,

I'm trying to force refetch a query. What I need is after the query has loaded and cached, When the user clicks a button, I want to reload the same query with displaying a loading state.

Here's the code example (forked from basic example) https://codesandbox.io/s/cranky-gagarin-mz0ho

Basically, I'm using remove and refetch

  const { status, data, error, isFetching, refetch, remove } = usePosts();

  const handleRetry = () => {
    remove();
    refetch();
  };

If you look in the network tab, you can see that the request fires twice. What do I do wrong? Is there another propper way to force refetch a query?

PS I figured out I can use isFetching along with isLoading, but two requests on remove + refetch seem like a bug.

[TkDodo]

there is only one request ;)

• remove only removes the query from the cache and doesn't inform observers.
• refetch then refetches it, giving you a clean loading state

alternatively, you could also use queryClient.resetQueries(key). It will reset the query to its initial state and refetch. I have an open PR to add a reset method to return it from useQuery, but I haven't really seen enough use-cases yet to actually add it. Maybe this is it?

anyways, why you are seeing two requests is likely because of refetchOnWindowFocus:

• you open the page
• you open the console and switch to the network tab to inspect how many requests there are
• you click the refetch button

--> but because you have the network tab focussed, your button click will trigger a refocus, which fetches, and then a refetch, which also refetches :)

if you click anywhere else on the page first, and then click the retry button, you can see that each click will only fire one request. or you can disable refetchOnWindowFocus - it's a common "trap" during dev-mode

[denisborovikov]

You're right and this is weird. I tried it in my local setup where I have refetchOnWindowFocus: false, and I had two requests. Anyway, thanks for the reply. If there's no bug, I'll try what you've suggested and/or isFetching as I mentioned above.