refetchOnWindowFocus not working in v5

[mamlzy]

I'm using nextjs 14 app router, here is my react-query provider:

and here is my custom hooks useQuery example:

i have another project using v4 and it's working fine. after switching browser tab, it shows refetch on the network tab. I don't now what's the problem here, i need some help, thanks!

[TkDodo]

have you seen the changes around window focus refetching?

https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#window-focus-refetching-no-longer-listens-to-the-focus-event

[mnpenner]

Hah! I use multiple monitors and so it always used to refetch when I switched from my IDE back to my browser and now in v5 it doesn't. I thought it was broken. This makes sense though, thanks for the link!

[anselvo]

Hi, tbh it is really hard to find this change in migration docs, because when I was migrating from v4 to v5 I've notice changes and when I was trying to find it in the docs I searched for the flag and flag was noticed only once not in that place, so I though something was broken) It would be nice to see migration guide with focusListener in the migration guide. Probably I would add info about how to archive full window focus to this page as well https://tanstack.com/query/v5/docs/framework/react/guides/window-focus-refetching

P.S. it is really sad that project doesn't support focus any more, because this was exact behaviour that I've expected and switching tabs looks like a bug for me because when I switch between windows it doesn't refetch data :( So, probably it should be renamed then or it would be nice to add support for focus, thanks)

[anselvo]

Yeah I know that what I did, I have couple of points;

1. name onWindowFocus is confusing because I expect that event focus will work in this case, moreover, I expect that word window is referring to browser window not a browser tab. Probably it should be called like refetchOnTabFocus
2. I would suggest support two listeners and add one more option, because right now I cannot easily separate these two listeners from one option refetchOnWindowFocus for example if I want to give client a chance to choose when he wants refetch request or I want some requests work on window focus and some of them on tab

Please, consider this improvements 🙇

[brauliodiez]

Just to avoid misunderstoods and be more accurate, should be refetchOnWindowsFocus marked as deprecated and create a new prop called refetchOnVisibilityChange?

[mnpenner]

Just to avoid misunderstoods and be more accurate, should be refetchOnWindowsFocus marked as deprecated and create a new prop called refetchOnVisibilityChange?

refetchOnVisibilityGain or something. "change" implies both when it loses visibility and gains visibility; I'm assuming refetch only happens on the latter.

I'd like to see options for both though. The on focus behavior was quite nice for development (when I switch between monitors, there's no visibility change)

[namdao2000]

Hi, I'm stumbling upon this now, how can I achieve the old behaviour where it refetches when switching tabs?

[TkDodo]

with a custom event handler that listens to the focus event: https://tanstack.com/query/v5/docs/framework/react/guides/window-focus-refetching#custom-window-focus-event

[yairhaimo]

My problem was that my dev tools were open and the "emulate focused page" option was on so the page never went out of focus in order to return to be in focus and refetch.

I wanted to put it out there because maybe someone else will run into this issue.

[voidoperator]

honestly its embarrassing the amount of time i just spent trying to figure out why it just stopped working suddenly.... thank u

[TkDodo]

would you want to add this as a “gotcha” to the docs?

https://tanstack.com/query/latest/docs/framework/react/guides/window-focus-refetching