窗口焦点重新拉取
如果用户离开你的应用后又返回,且查询数据已过期,TanStack Query 会自动在后台为你请求最新数据。你可以通过 refetchOnWindowFocus 选项全局或按查询禁用此行为:
全局禁用
TypeScript
1//2const queryClient = new QueryClient({3 defaultOptions: {4 queries: {5 refetchOnWindowFocus: false, // default: true6 },7 },8})9 10function App() {11 return <QueryClientProvider client={queryClient}>...</QueryClientProvider>12}按查询禁用
TypeScript
1useQuery({2 queryKey: ['todos'],3 queryFn: fetchTodos,4 refetchOnWindowFocus: false,5})自定义窗口焦点事件
在极少数情况下,你可能希望自行管理触发 TanStack Query 重新验证的窗口焦点事件。为此,TanStack Query 提供了 focusManager.setEventListener 函数,它向你提供一个应在窗口获得焦点时调用的回调,并允许你自行设置事件监听器。调用 focusManager.setEventListener 时,先前设置的处理器(大多数情况下为默认处理器)会被移除,改用你新提供的处理器。例如,以下是默认处理器的实现:
TypeScript
1focusManager.setEventListener((handleFocus) => {2 // Listen to visibilitychange3 if (typeof window !== 'undefined' && window.addEventListener) {4 const visibilitychangeHandler = () => {5 handleFocus(document.visibilityState === 'visible')6 }7 window.addEventListener('visibilitychange', visibilitychangeHandler, false)8 return () => {9 // Be sure to unsubscribe if a new handler is set10 window.removeEventListener('visibilitychange', visibilitychangeHandler)11 }12 }13})在 React Native 中管理焦点
React Native 不使用 window 上的事件监听器,而是通过 AppState 模块 提供焦点信息。你可以利用 AppState 的 “change” 事件,在应用状态变为 “active” 时触发更新:
TypeScript
1import { AppState } from 'react-native'2import { focusManager } from '@tanstack/react-query'3 4function onAppStateChange(status: AppStateStatus) {5 if (Platform.OS !== 'web') {6 focusManager.setFocused(status === 'active')7 }8}9 10useEffect(() => {11 const subscription = AppState.addEventListener('change', onAppStateChange)12 13 return () => subscription.remove()14}, [])管理焦点状态
TypeScript
1import { focusManager } from '@tanstack/react-query'2 3// Override the default focus state4focusManager.setFocused(true)5 6// Fallback to the default focus check7focusManager.setFocused(undefined)故障排除
如果返回标签页时过期的查询未触发重新拉取,请检查 Chrome DevTools 中是否启用了 Emulate a focused page(模拟页面获得焦点)选项。该设置会使 document.visibilityState 保持为 visible,并阻止 visibilitychange 事件——而 TanStack Query 正是依赖该事件实现默认的焦点处理逻辑。
请在 DevTools 的 Rendering(渲染)面板中禁用 Emulate a focused page,然后切换至其他标签页再返回,以测试窗口焦点重新拉取功能。更多详情请参阅 Chrome DevTools 文档。