Polling Stops with refetchIntervalInBackground and Retry When Tab Is Inactive

[antoantonydh]

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

1. Open codesandbox link and use the preview option in new tab(https://gk6c6t.csb.app/)
2. open chrome network tool to set the network as offline
3. 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)
4. switch back to the preview tab
5. 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