窗口焦点重新获取

窗口焦点重新获取

如果用户离开您的应用程序并返回，并且查询数据已过时，TanStack Query 会在后台自动为您请求新数据。您可以使用 refetchOnWindowFocus 选项在全局或按查询禁用此功能：

全局禁用

tsx

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

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

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

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

按查询禁用

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) => {
  // 侦听可见性更改
  if (typeof window !== 'undefined' && window.addEventListener) {
    const visibilitychangeHandler = () => {
      handleFocus(document.visibilityState === 'visible')
    }
    window.addEventListener('visibilitychange', visibilitychangeHandler, false)
    return () => {
      // 如果设置了新的处理程序，请务必取消订阅
      window.removeEventListener('visibilitychange', visibilitychangeHandler)
    }
  }
})

focusManager.setEventListener((handleFocus) => {
  // 侦听可见性更改
  if (typeof window !== 'undefined' && window.addEventListener) {
    const visibilitychangeHandler = () => {
      handleFocus(document.visibilityState === 'visible')
    }
    window.addEventListener('visibilitychange', visibilitychangeHandler, false)
    return () => {
      // 如果设置了新的处理程序，请务必取消订阅
      window.removeEventListener('visibilitychange', visibilitychangeHandler)
    }
  }
})

在 Solid Native 中管理焦点

Solid Native 不使用 window 上的事件侦听器，而是通过 AppState 模块提供焦点信息。您可以使用 AppState 的“change”事件在应用状态更改为“active”时触发更新：

tsx

import { AppState } from 'solid-native'
import { focusManager } from '@tanstack/solid-query'

function onAppStateChange(status: AppStateStatus) {
  if (Platform.OS !== 'web') {
    focusManager.setFocused(status === 'active')
  }
}

createEffect(() => {
  const subscription = AppState.addEventListener('change', onAppStateChange)

  return () => subscription.remove()
})

import { AppState } from 'solid-native'
import { focusManager } from '@tanstack/solid-query'

function onAppStateChange(status: AppStateStatus) {
  if (Platform.OS !== 'web') {
    focusManager.setFocused(status === 'active')
  }
}

createEffect(() => {
  const subscription = AppState.addEventListener('change', onAppStateChange)

  return () => subscription.remove()
})

管理焦点状态

tsx

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

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

// 回退到默认焦点检查
focusManager.setFocused(undefined)

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

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

// 回退到默认焦点检查
focusManager.setFocused(undefined)

全局禁用

按查询禁用

自定义窗口焦点事件

在 Solid Native 中管理焦点

管理焦点状态