Issue with react-query and react-router calling the query again before navigating away from the page.

[Pau1fitz]

To Reproduce
Steps to reproduce the behavior:
I am using react-query v.3.16.0 with react-router-dom. I am having an issue when I navigate from a component with a sibling component using match params.

For example I have a page with a list of Football Leagues (Leagues component in code sandbox) When I go to this page and navigate to an individual league if you check the console you can see that the useQuery gets recalled in the Leagues component gets called again, although it shouldn't as this component has unmounted and the individual League component is visible.
See codesanbox here which will demonstrate the problem more clearly.

Expected behavior
I would expect when I navigate to a component (League) that is not the component (Leagues) where the useQuery exists that that query should not be called again before navigating away from that component.

**Desktop **

• OS: osx
• Browser: chrome
• Version: 91.0.4472.114

Let me know if any more information is required.

[TkDodo]

Looks like a standard background update because queries are immediately marked as stale and a new observer mounts. This is the desired default behaviour of react-query (stale-while-revalidate).

please see:

• https://react-query.tanstack.com/guides/important-defaults
• https://react-query.tanstack.com/guides/caching
• https://tkdodo.eu/blog/practical-react-query

[Pau1fitz]

adding refetchOnWindowFocus: false seems to prevent the unnecessary query before unmounting, but this seems slightly odd, as it's not really a window focus and I don't necessarily want to get rid of this behavior of when a user actually unfocuses from the window and refocuses back.

[TkDodo]

refetchOnMount is what you are looking for, or even better, customize a staleTime on the query.

[Pau1fitz]

refetchOnMount doesn't seem to fix the issue. Is it not the opposite that I want? The whole issue is that the query is being triggered when the component unmounts. I do want the query to be made when the component mounts but not when it unmounts.

Would it be at all possible to edit the code sandbox to explain what you mean?

[ggregoire]

I see the same issue on my project. When I navigate from one page to another, react-query refetches the queries for the page I'm leaving before fetching the queries for the page I'm entering. I'm using react-router too.

[Pau1fitz]

@ggregoire are you focusing between the browser and devtools? That was what I was doing, and is what made me believe that this bug was occurring.

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
[...]
During development, this will probably be triggered more frequently, especially because focusing between the Browser DevTools and your app will also cause a fetch, so be aware of that.

[ggregoire]

@Pau1fitz My devtools was open on the Network panel but I was not focusing it. Perhaps the focus automatically switches between both? Or maybe some weird interaction with a Chrome extension? Not sure.

Anyway, there was also a refetch when I clicked on a input file (which opens a new window to select a file) and I didn't understand why, but now with your reply it totally makes sense. 😉

Thanks!

[Pau1fitz]

yeah it had me pretty stumped also 😀

you can add refetchOnWindowFocus: false globally which prevents this. Or else you can do it on an individual query level. There are instructions here.

[TkDodo]

refechOnWindowFocus: process.env.NODE_ENV !== 'development'

I have this also as a potential gotcha in my first part of react-query related articles: https://tkdodo.eu/blog/practical-react-query#the-defaults-explained

[Pau1fitz]

@TkDodo should this be added to the official docs? seems to be catching quite a few people out.

[TkDodo]

I’d say it’s mentioned on this page, but if you’d like to extend that, I’ll gladly accept a PR: https://react-query.tanstack.com/guides/important-defaults

[Pau1fitz]

@TkDodo created a PR explaining that re-fetches could occur more often during development due to focusing on the devtools #2413

[ggregoire]

refechOnWindowFocus: process.env.NODE_ENV !== 'development'

I have this also as a potential gotcha in my first part of react-query related articles: tkdodo.eu/blog/practical-react-query#the-defaults-explained

Thanks for the blog! I just read the entire series about React Query and learned a lot!