Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Polling Stops with refetchIntervalInBackground and Retry When Tab Is Inactive #8353

Open
@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

  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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

        AltStyle によって変換されたページ (->オリジナル) /