If a user leaves your application and returns and the query data is stale, TanStack Query automatically requests fresh data for you in the background. You can disable this globally or per-query using the refetchOnWindowFocus
option:
tsx
//const queryClient = new QueryClient({defaultOptions: {queries: {refetchOnWindowFocus: false, // default: true},},})function App() {return <QueryClientProvider client={queryClient}>...</QueryClientProvider>}
tsx
//const queryClient = new QueryClient({defaultOptions: {queries: {refetchOnWindowFocus: false, // default: true},},})function App() {return <QueryClientProvider client={queryClient}>...</QueryClientProvider>}
tsx
useQuery({queryKey: ['todos'],queryFn: fetchTodos,refetchOnWindowFocus: false,})
tsx
useQuery({queryKey: ['todos'],queryFn: fetchTodos,refetchOnWindowFocus: false,})
In rare circumstances, you may want to manage your own window focus events that trigger TanStack Query to revalidate. To do this, TanStack Query provides a focusManager.setEventListener
function that supplies you the callback that should be fired when the window is focused and allows you to set up your own events. When calling focusManager.setEventListener
, the previously set handler is removed (which in most cases will be the default handler) and your new handler is used instead. For example, this is the default handler:
tsx
focusManager.setEventListener((handleFocus) => {// Listen to visibilitychangeif (typeof window !== 'undefined' && window.addEventListener) {window.addEventListener('visibilitychange', () => handleFocus(), false)return () => {// Be sure to unsubscribe if a new handler is setwindow.removeEventListener('visibilitychange', () => handleFocus())}}})
tsx
focusManager.setEventListener((handleFocus) => {// Listen to visibilitychangeif (typeof window !== 'undefined' && window.addEventListener) {window.addEventListener('visibilitychange', () => handleFocus(), false)return () => {// Be sure to unsubscribe if a new handler is setwindow.removeEventListener('visibilitychange', () => handleFocus())}}})
Instead of event listeners on window
, React Native provides focus information through the AppState
module. You can use the AppState
"change" event to trigger an update when the app state changes to "active":
tsx
import { AppState } from 'react-native'import { focusManager } from '@tanstack/react-query'function onAppStateChange(status: AppStateStatus) {if (Platform.OS !== 'web') {focusManager.setFocused(status === 'active')}}useEffect(() => {const subscription = AppState.addEventListener('change', onAppStateChange)return () => subscription.remove()}, [])
tsx
import { AppState } from 'react-native'import { focusManager } from '@tanstack/react-query'function onAppStateChange(status: AppStateStatus) {if (Platform.OS !== 'web') {focusManager.setFocused(status === 'active')}}useEffect(() => {const subscription = AppState.addEventListener('change', onAppStateChange)return () => subscription.remove()}, [])
tsx
import { focusManager } from '@tanstack/react-query'// Override the default focus statefocusManager.setFocused(true)// Fallback to the default focus checkfocusManager.setFocused(undefined)
tsx
import { focusManager } from '@tanstack/react-query'// Override the default focus statefocusManager.setFocused(true)// Fallback to the default focus checkfocusManager.setFocused(undefined)
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyCheck it out