Window Focus Refetching | TanStack Query Solid Docs

Wenn ein Benutzer Ihre Anwendung verlässt und zurückkehrt und die Abfragedaten veraltet sind, fordert TanStack Query automatisch frische Daten für Sie im Hintergrund an. Sie können dies global oder pro Abfrage mit der Option refetchOnWindowFocus deaktivieren.

Global deaktivieren

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>
}

Pro Abfrage deaktivieren

tsx

useQuery(() => {
  queryKey: ['todos'],
  queryFn: fetchTodos,
  refetchOnWindowFocus: false,
})

useQuery(() => {
  queryKey: ['todos'],
  queryFn: fetchTodos,
  refetchOnWindowFocus: false,
})

Benutzerdefiniertes Fensterfokus-Ereignis

In seltenen Fällen möchten Sie möglicherweise Ihre eigenen Fensterfokus-Ereignisse verwalten, die TanStack Query zur Neubewertung auslösen. Zu diesem Zweck stellt TanStack Query eine Funktion focusManager.setEventListener zur Verfügung, die Ihnen den Callback liefert, der ausgelöst werden soll, wenn das Fenster den Fokus erhält, und es Ihnen ermöglicht, Ihre eigenen Ereignisse einzurichten. Beim Aufruf von focusManager.setEventListener wird der zuvor festgelegte Handler entfernt (was in den meisten Fällen der Standardhandler ist) und stattdessen Ihr neuer Handler verwendet. Zum Beispiel ist dies der Standardhandler.

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)
    }
  }
})

Fokusverwaltung in React Native

Anstelle von Ereignis-Listenern auf window liefert React Native Fokusinformationen über das AppState-Modul. Sie können das AppState "change"-Ereignis verwenden, um ein Update auszulösen, wenn sich der App-Status zu "aktiv" ändert.

tsx

import { AppState } from 'react-native'
import { focusManager } from '@tanstack/solid-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/solid-query'

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

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

  return () => subscription.remove()
}, [])

Fokusstatus verwalten

tsx

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

// Override the default focus state
focusManager.setFocused(true)

// Fallback to the default focus check
focusManager.setFocused(undefined)

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

// Override the default focus state
focusManager.setFocused(true)

// Fallback to the default focus check
focusManager.setFocused(undefined)