In react-query how can stop refetch data? It happens when I change the browser tab and return, when I resize the browser window and sometimes without understanding why. It's not a background thing, I needed a preloader but in this case it's annoying. In useQuery I tried to set staleTime and cacheTime but no effect.
1 Answer
When initializing the QueryClient, you can configure various default options for queries. You can configure staleTime as well as cacheTime to ensure that data is not refetched unless it is stale. In your case, you mention the data being refreshed when you re-focus the browser windows. In this case, you may want to specifically look into refetchOnWindowFocus options.
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 1000 * 60 * 60, // 1 hour in ms
cacheTime: 1000 * 60 * 60, // 1 hour in ms
refetchOnWindowFocus: false, // Disables automatic refetching when browser window is focused.
},
},
})
1 Comment
TkDodo
the default value for refetchOnWindowFocus respects staleTime, so technically, setting staleTime alone should work.