窗口焦点重新获取
如果用户离开您的应用程序后返回，并且查询数据已过时，TanStack Query 会自动在后台为您请求新数据。您可以使用 refetchOnWindowFocus 选项在全局或每个查询中禁用此功能。
全局禁用
ts
export const appConfig: ApplicationConfig = {
providers: [
provideTanStackQuery(
new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false, // default: true
},
},
}),
),
],
}
export const appConfig: ApplicationConfig = {
providers: [
provideTanStackQuery(
new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false, // default: true
},
},
}),
),
],
}
按查询禁用
ts
injectQuery(() => ({
queryKey: ['todos'],
queryFn: fetchTodos,
refetchOnWindowFocus: false,
}))
injectQuery(() => ({
queryKey: ['todos'],
queryFn: fetchTodos,
refetchOnWindowFocus: false,
}))
自定义窗口焦点事件
在极少数情况下，您可能需要自行管理触发 TanStack Query 重新验证的窗口聚焦事件。为此，TanStack Query 提供了一个 focusManager.setEventListener 函数，该函数会提供当窗口聚焦时应该触发的回调，并允许您设置自己的事件。调用 focusManager.setEventListener 时，之前设置的事件监听器会被移除（在大多数情况下是默认监听器），并使用您新的监听器。例如，这是默认的监听器。
tsx
focusManager.setEventListener((handleFocus) => {
// Listen to visibilitychange
if (typeof window !== 'undefined' && window.addEventListener) {
const visibilitychangeHandler = () => {
handleFocus(document.visibilityState === 'visible')
}
window.addEventListener('visibilitychange', visibilitychangeHandler, false)
return () => {
// Be sure to unsubscribe if a new handler is set
window.removeEventListener('visibilitychange', visibilitychangeHandler)
}
}
})
focusManager.setEventListener((handleFocus) => {
// Listen to visibilitychange
if (typeof window !== 'undefined' && window.addEventListener) {
const visibilitychangeHandler = () => {
handleFocus(document.visibilityState === 'visible')
}
window.addEventListener('visibilitychange', visibilitychangeHandler, false)
return () => {
// Be sure to unsubscribe if a new handler is set
window.removeEventListener('visibilitychange', visibilitychangeHandler)
}
}
})
管理焦点状态
tsx
import { focusManager } from '@tanstack/angular-query-experimental'
// Override the default focus state
focusManager.setFocused(true)
// Fallback to the default focus check
focusManager.setFocused(undefined)
import { focusManager } from '@tanstack/angular-query-experimental'
// Override the default focus state
focusManager.setFocused(true)
// Fallback to the default focus check
focusManager.setFocused(undefined)
