Stop refetch data in react-query

Question

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.

Answer 1

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.
    },
  },
})