窗口聚焦时重新获取
如果用户离开您的应用程序并返回，且 query 数据已过时，**TanStack Query 会自动在后台为您请求新的数据**。您可以使用 refetchOnWindowFocus 选项全局或按 query 禁用此功能
全局禁用
tsx
//
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false, // default: true
},
},
})
function App() {
return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}
//
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false, // default: true
},
},
})
function App() {
return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}
按 Query 禁用
tsx
useQuery({
queryKey: ['todos'],
queryFn: fetchTodos,
refetchOnWindowFocus: false,
})
useQuery({
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)
}
}
})
在 React Native 中管理聚焦
React Native 没有在 window 上使用事件监听器，而是通过 AppState 模块 提供焦点信息。您可以使用 AppState "change" 事件，在应用状态更改为 "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()
}, [])
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 state
focusManager.setFocused(true)
// Fallback to the default focus check
focusManager.setFocused(undefined)
import { focusManager } from '@tanstack/react-query'
// Override the default focus state
focusManager.setFocused(true)
// Fallback to the default focus check
focusManager.setFocused(undefined)
