译零 TransZero · TanStack Query 中文文档
主站

窗口焦点重新拉取

更新于 2026-11-02 Angular 查看英文原文 ↗

如果用户离开你的应用后又返回,且查询数据已过期,TanStack Query 会自动在后台为你请求最新数据。你可以通过 refetchOnWindowFocus 选项全局或按查询禁用此行为:

全局禁用

TypeScript
1export const appConfig: ApplicationConfig = {2  providers: [3    provideTanStackQuery(4      new QueryClient({5        defaultOptions: {6          queries: {7            refetchOnWindowFocus: false, // default: true8          },9        },10      }),11    ),12  ],13}

按查询禁用

TypeScript
1injectQuery(() => ({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})

管理焦点状态

TypeScript
1import { focusManager } from '@tanstack/angular-query-experimental'2 3// Override the default focus state4focusManager.setFocused(true)5 6// Fallback to the default focus check7focusManager.setFocused(undefined)

故障排查

如果返回标签页时过期的查询未触发重新拉取,请检查 Chrome 开发者工具中是否启用了 Emulate a focused page(模拟页面已获得焦点)选项。该设置会使 document.visibilityState 保持为 visible,并阻止 visibilitychange 事件触发,而 TanStack Query 正是依赖该事件实现默认的焦点处理逻辑。

请在开发者工具的 Rendering(渲染)面板中禁用 Emulate a focused page,然后切换至其他标签页再返回,以测试窗口焦点重新拉取功能。更多详情请参阅 Chrome DevTools 文档。

本页为 TanStack Query 文档(Angular 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de