Window Focus Refetching

If a user leaves your application and returns to stale data, Svelte Query automatically requests fresh data for you in the background. You can disable this globally or per-query using the refetchOnWindowFocus option:

Disabling Globally

1 <script>
2 // Configure for all queries
3 import { QueryClient, QueryClientProvider } from '@sveltestack/svelte-query'
4 
5 const queryClient = new QueryClient({
6   defaultOptions: {
7     queries: {
8       refetchOnWindowFocus: false,
9     },
10   },
11 })
12 </script>
13 
14 <QueryClientProvider client={queryClient}>...</QueryClientProvider>

Disabling Per-Query

 useQuery('todos', fetchTodos, { refetchOnWindowFocus: false })

Custom Window Focus Event

In rare circumstances, you may want to manage your own window focus events that trigger Svelte Query to revalidate. To do this, Svelte Query provides a focusManager.setEventListener function that supplies you the callback that should be fired when the window is focused and allows you to set up your own events. When calling focusManager.setEventListener, the previously set handler is removed (which in most cases will be the default handler) and your new handler is used instead. For example, this is the default handler:

1 focusManager.setEventListener(handleFocus => {
2   // Listen to visibillitychange and focus
3   if (typeof window !== 'undefined' && window.addEventListener) {
4     window.addEventListener('visibilitychange', handleFocus, false)
5     window.addEventListener('focus', handleFocus, false)
6   }
7 
8   return () => {
9     // Be sure to unsubscribe if a new handler is set
10     window.removeEventListener('visibilitychange', handleFocus)
11     window.removeEventListener('focus', handleFocus)
12   }
13 })

Ignoring Iframe Focus Events

A great use-case for replacing the focus handler is that of iframe events. Iframes present problems with detecting window focus by both double-firing events and also firing false-positive events when focusing or using iframes within your app. If you experience this, you should use an event handler that ignores these events as much as possible. I recommend this one! It can be set up in the following way:

1 import { focusManager } from '@sveltestack/svelte-query'
2 import onWindowFocus from './onWindowFocus' // The gist above
3 
4 focusManager.setEventListener(onWindowFocus) // Boom!

Managing focus state

1 import { focusManager } from '@sveltestack/svelte-query'
2 
3 // Override the default focus state
4 focusManager.setFocused(true)
5 
6 // Fallback to the default focus check
7 focusManager.setFocused(undefined)