Neuabfrage bei Fensterfokus
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
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClientConfig: {
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
},
},
},
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClientConfig: {
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
},
},
},
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
Pro Abfrage deaktivieren
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.
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)
}
}
})
Fokusstatus verwalten
import { focusManager } from '@tanstack/vue-query'
// Override the default focus state
focusManager.setFocused(true)
// Fallback to the default focus check
focusManager.setFocused(undefined)
import { focusManager } from '@tanstack/vue-query'
// Override the default focus state
focusManager.setFocused(true)
// Fallback to the default focus check
focusManager.setFocused(undefined)
