refetchOnWindowFocus is not working (v5)

[frederikhors]

Describe the bug

I just found out that refetchOnWindowFocus is not working.

I have this setup:

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 30, // 30 seconds
      persister: //...
    },
  },
});

and even if the below works:

<svelte:window on:visibilitychange={() => console.log('visibilitychange changed!')} />

tanstack/query does not reload queries when visibilitychanges.

Can you confirm?

Your minimal, reproducible example

https://stackblitz.com/edit/sveltejs-kit-template-default-6ntbzr?file=src%2Froutes%2F%2Bpage.svelte,src%2Fapp.html

How often does this bug happen?

Every time

Platform

Win 10, Chrome 119.0.6045.124.

Tanstack Query adapter

svelte-query

TanStack Query version

5.4.3

TypeScript version

5

Additional context

"@tanstack/query-persist-client-core": "5.4.3",
"@tanstack/svelte-query": "5.4.3",

[TkDodo]

I'm not really sure how svelte works, but somewhere, we need to call queryClient.mount() to subscribe to the window events. In React and solid, that's what the QueryClientProvider does:

query/packages/react-query/src/QueryClientProvider.tsx

Lines 33 to 38 in 1d3ee67

	React.useEffect(() => {
	client.mount()
	return () => {
	client.unmount()
	}
	}, [client])

What's the equivalent for svelte here? @lachlancollins might know this :)

[lachlancollins]

@TkDodo the equivalent mount/unmount logic should be this:

query/packages/svelte-query/src/QueryClientProvider.svelte

Lines 8 to 16 in 73e3396

	onMount(() => {
	client.mount()
	})
	setQueryClientContext(client)
	onDestroy(() => {
	client.unmount()
	})

[lachlancollins]

@frederikhors Dominik was correct, you need to add the QueryClientProvider component somewhere in your app. The most common place to put this is src/routes/+layout.svelte:

<script lang="ts">
  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'

  const queryClient = new QueryClient()
</script>

<QueryClientProvider client={queryClient}>
  <slot />
</QueryClientProvider>

Then you would remove this from +page.svelte:

const client = new QueryClient();

setQueryClientContext(client);

If you needed the client from context you could call const client = useQueryClient()

You can see the docs here: https://tanstack.com/query/latest/docs/svelte/overview

[frederikhors]

It works! Thanks!