The FocusManager manages the focus state within TanStack Query.
It can be used to change the default event listeners or to manually change the focus state.
Its available methods are:
focusManager.setEventListenersetEventListener can be used to set a custom event listener:
import { focusManager } from '@tanstack/react-query'
focusManager.setEventListener((handleFocus) => { // Listen to visibilitychange if (typeof window !== 'undefined' && window.addEventListener) { window.addEventListener('visibilitychange', handleFocus, false) }
return () => { // Be sure to unsubscribe if a new handler is set window.removeEventListener('visibilitychange', handleFocus) }})focusManager.subscribesubscribe can be used to subscribe to changes in the visibility state. It returns an unsubscribe function:
import { focusManager } from '@tanstack/react-query'
const unsubscribe = focusManager.subscribe((isVisible) => { console.log('isVisible', isVisible)})focusManager.setFocusedsetFocused can be used to manually set the focus state. Set undefined to fall back to the default focus check.
import { focusManager } from '@tanstack/react-query'
// Set focusedfocusManager.setFocused(true)
// Set unfocusedfocusManager.setFocused(false)
// Fallback to the default focus checkfocusManager.setFocused(undefined)Options
focused: boolean | undefinedfocusManager.isFocusedisFocused can be used to get the current focus state.
const isFocused = focusManager.isFocused()“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyCheck it out
