It's frustratingWhen React Query’s refetchInterval doesn’t work as expected and your data only updates once. This is a common gotcha, usually caused by a few specific interactions between React Query’s caching and your component’s lifecycle.
Let’s go through this with a “Diagnostic Checklist” approach, and I’ll walk you through the common culprits and solutions.
Root Causes & Solutions
|
Cause
|
Explanation & Solution
|
| Request Caching (e.g., Axios cache) |
If your fetcher (like Axios) has caching enabled, React Query will call the function but the network request is skipped because the response is served from cache. Disable cache for that request to force actual network calls. |
| Query is Inactive |
React Query only refetches active queries. If the component unmounts or the query is disabled, refetching stops. Make sure your query is enabled and the component is mounted. |
| Error State Halts Refetching |
By default, if a query errors, refetchInterval stops. Use a function for refetchInterval to return false on error, or a number otherwise |
| Incorrect Option Usage |
Ensure you’re passing refetchInterval to the correct query and not relying on default QueryClient settings. |
| Window Focus/Visibility Settings |
If refetchOnWindowFocus is false, refetching may pause when the tab is inactive. |
Practical Fixes & Patterns
Apply these proven techniques to make refetchInterval work consistently in React Query even across errors, inactive tabs, or stale caches.
Disable Caching in Your Fetcher
const { data, isFetching } = useQuery( ['test'],
() => axios.get('https://jsonplaceholder.typicode.com/todos/1', { cache: false }),
{ refetchInterval: 3000 }
);
// Ensures a real network request is made every interval[5][6]
Dynamic Refetch Interval (Stop on Error or Condition)
const { data, isError } = useQuery( ['data'],
fetchData,
{
refetchInterval: (data, query) => (query.state.status === "error" ? false : 3000),
// Or use your own stopping condition
}
);
// Stops refetching if an error occurs[2][3][4]
Also Read: How to Create an eCommerce app using ReactJS?
Ensure Query is Active and Enabled
const { data } = useQuery( ['key'],
fetchData,
{
enabled: true, // Query must be enabled
refetchInterval: 3000,
}
);
Use refetchIntervalInBackground for Inactive Tabs
const { data } = useQuery( ['key'],
fetchData,
{
refetchInterval: 3000,
refetchIntervalInBackground: true, // Keeps refetching even if tab is inactive[3]
}
);
