窗口聚焦重新获取数据

窗口焦点重新获取

如果用户离开你的应用后又返回，并且查询数据已过期（stale），TanStack Query 会自动在后台为你请求最新的数据。你可以通过 refetchOnWindowFocus 选项来全局或针对单个查询禁用此功能：

全局禁用

//
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false, // 默认值: true
    },
  },
})

function App() {
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}

单个查询禁用

useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
  refetchOnWindowFocus: false,
})

自定义窗口焦点事件

在极少数情况下，你可能希望自行管理触发 TanStack Query 重新验证的窗口焦点事件。为此，TanStack Query 提供了 focusManager.setEventListener 函数。该函数会提供一个回调函数，当窗口获得焦点时应调用此回调，并允许你设置自己的事件监听器。调用 focusManager.setEventListener 时，之前设置的处理器（大多数情况下是默认处理器）会被移除，转而使用你的新处理器。例如，以下是默认的处理器：

focusManager.setEventListener((handleFocus) => {
  // 监听 visibilitychange 事件
  if (typeof window !== 'undefined' && window.addEventListener) {
    const visibilitychangeHandler = () => {
      handleFocus(document.visibilityState === 'visible')
    }
    window.addEventListener('visibilitychange', visibilitychangeHandler, false)
    return () => {
      // 确保在设置新处理器时取消订阅
      window.removeEventListener('visibilitychange', visibilitychangeHandler)
    }
  }
})

在 React Native 中管理焦点

React Native 不使用 window 上的事件监听器，而是通过 AppState 模块 提供焦点信息。你可以使用 AppState 的 "change" 事件，在应用状态变为 "active" 时触发更新：

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()
}, [])

管理焦点状态

import { focusManager } from '@tanstack/react-query'

// 覆盖默认的焦点状态
focusManager.setFocused(true)

// 恢复为默认的焦点检查
focusManager.setFocused(undefined)