setQueryData seems to cause useQuery to invoke queryFn again

[shichongrui]

I'm not confident this is a bug and isn't just my own misunderstanding, thus posting a discussion rather than creating an issue.

My understanding is that if I use useQuery with a key, say my-key, and then call queryClient.setQueryData('my-key', ...), it would not cause the queryFn in the useQuery hook to be called again.

In practice it seems that by calling setQueryData with a key, it invalidates the cache for that key (? not sure that is what is happening under the hood) and causes the queryFn to be run again.

Here is a code sandbox illustrating the issue.

https://codesandbox.io/s/stoic-ellis-mfebi?file=/src/Component.js

One second after the component loads, the useQuery returns Hello and renders that to the screen. When you click the button it issues a setQueryData on the same key used in useQuery and you will see the text momentarily change to World. But you'll notice the query counter increments from the queryFn being called again and the message switches back to Hello.

My expectation here would have been that the query counter would have stayed at 1 and that the queryFn would not have been called again leaving the text World being rendered.

Am I doing something wrong here or not understanding how this works?

[shichongrui]

Doing some reading around the docs it seems what I am seeing is not how things are supposed to work: https://react-query.tanstack.com/guides/updates-from-mutation-responses.

[TkDodo]

You're just getting a refetch because staleTime is zero and you refocus the window when you go from the code editor to the iframe on the right in codesandbox, so the background refetch is interfering with your mutation. It's a classic gotcha

from https://tkdodo.eu/blog/practical-react-query#the-defaults-explained

If you see a refetch that you are not expecting, it is likely because you just focused the window and React Query is doing a refetchOnWindowFocus, which is a great feature for production: If the user goes to a different browser tab, and then comes back to your app, a background refetch will be triggered automatically, and data on the screen will be updated if something has changed on the server in the meantime. All of this happens without a loading spinner being shown, and your component will not re-render if the data is the same as you currently have in the cache.

updated sandbox: https://codesandbox.io/s/loving-easley-79wyg?file=/src/Component.js

[shichongrui]

Ah ok that all makes sense. Thanks for answering!