-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Open
Labels
@antoantonydh
Description
Describe the bug
I am creating this issue based on the discussion here.
When using refetchIntervalInBackground
with retry
, the retry mechanism fails to execute if the browser tab is inactive. I have the following configuration for my React Query setup:
const client = new QueryClient({ defaultOptions: { queries: { staleTime: 30_000, // 30 sec networkMode: "always", }, mutations: { networkMode: "always", }, }, });
export function useGetTodoList() { return useQuery( ["todos"], async () => { // fetch logic here }, { refetchInterval: 60_000, // 1 min refetchIntervalInBackground: true, retry: 3, } ); }
Problem
With this configuration:
- The query is set to poll every 1 minute (
refetchInterval: 60_000
), even when the tab is inactive (refetchIntervalInBackground: true
). - The retry mechanism is configured to retry 3 times on failure (
retry: 3
).
However, if the tab is inactive and a request fails, the retry logic pauses and waits until the tab becomes active again. This behavior eliminates the purpose of refetchIntervalInBackground
, as the retries do not proceed while the tab remains inactive.
Your minimal, reproducible example
https://codesandbox.io/p/sandbox/suspicious-butterfly-gk6c6t
Steps to reproduce
- Open codesandbox link and use the preview option in new tab(https://gk6c6t.csb.app/)
- open chrome network tool to set the network as offline
- switch to next tab and wait for 3 minutes, so we can expect atleast (3 requests for refetch + retry calls (3 * 3 = 9). so total of 12 requests atleast)
- switch back to the preview tab
- there will be only 2 failed requests instead of ~12
Expected behavior
When refetchIntervalInBackground: true
is used:
- Retries should execute in the background, independent of tab visibility.
- The retry mechanism should adhere to the configured retry settings (e.g., retry count, delay) without relying on the tab being active.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Browser: Chrome
Tanstack Query adapter
react-query
TanStack Query version
4.36.1
TypeScript version
No response
Additional context
No response