T
TanStack3y ago
harsh-harlequin

refetchIntervalInBackground

I have refetchIntervalInBackground set to false, but I'm trying to figure out what "background" actually means? Does it mean "not focused"? I have the following code:
import React from "react"
import { useQuery } from "@tanstack/react-query"

let count = 0
const Refetch = () => {
const { data } = useQuery({
queryFn: async () => {
return count++
},
refetchInterval: 1000,
refetchIntervalInBackground: false,
})
return <div>{String(data)}</div>
}

export default Refetch
import React from "react"
import { useQuery } from "@tanstack/react-query"

let count = 0
const Refetch = () => {
const { data } = useQuery({
queryFn: async () => {
return count++
},
refetchInterval: 1000,
refetchIntervalInBackground: false,
})
return <div>{String(data)}</div>
}

export default Refetch
Just as a contrived example, I'm seeing it is still incrementing when I click away from the tab, but is that actually in the background?
5 Replies
like-gold
like-gold3y ago
window not focused / visible
harsh-harlequin
harsh-harlequinOP3y ago
window + tab? let me make a codesandbox, I swear this may be bug...
like-gold
like-gold3y ago
GitHub
query/packages/query-core/src/queryObserver.ts at 457723f2cd47a460d...
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - query/packages/query-core/src/queryObs...
like-gold
like-gold3y ago
focusManager just checks:
return globalThis.document?.visibilityState !== 'hidden'
return globalThis.document?.visibilityState !== 'hidden'
harsh-harlequin
harsh-harlequinOP3y ago
ahhh i think that's the discrepancy, our useIsWindowFocused hook just has an event listener for window.focus, window.blur... whereas it looks like react query is using visibilityState which is a little different, thanks!

Did you find this page helpful?