Skip to content

A React Query gotcha

 Published on 14th June 2023

I’ve been working on a project that uses React Query and I came across a bug caused by the data on the page being reset when coming back to the browser after focusing another window. Upon investigation I discovered that there is a flag enabled by default called refetchOnWindowFocus which does what it says on the tin.

To me this seems like an odd choice to enable by default. I can see the benefits, but it isn’t typically something I’d want to happen. In defence of React Query, the docs provide an explanation of this feature. It just caught me by surprise.

Going forward I’ll be configuring React Query in my projects using the following default options. This also gives the ability to override these options if you do want that behaviour for a specific query (see docs linked above).

const queryClient = new QueryClient({ 
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
refetchOnReconnect: false