"No QueryClient set, use QueryClientProvider to set one" when I definitely set one

[swyxio]

REPRO HERE

https://github.com/sw-yx/svelte-query-issue-repro/

Problem

here is my code inside src/routes/index.svelte

<script>
    import { useQuery, QueryClient, QueryClientProvider } from '@sveltestack/svelte-query';
    const queryClient = new QueryClient();
    const queryResult = useQuery('repoData', () => fetch('/api').then((res) => res.json()));
</script>

<QueryClientProvider client={queryClient}>
    <section>
        <h1>Welcome</h1>

        <pre>
        {JSON.stringify(queryResult, null, 2)}
    </pre>
    </section>
</QueryClientProvider>

and this is the error i get

No QueryClient set, use QueryClientProvider to set one
Error: No QueryClient set, use QueryClientProvider to set one
    at Module.useQueryClient (/node_modules/@sveltestack/svelte-query/svelte/queryClientProvider/useQueryClient.js:6:15)
    at Module.useQuery (/node_modules/@sveltestack/svelte-query/svelte/query/useQuery.js:9:19)
    at index.svelte:11:21
    at Object.$$render (/Users/swyx/Desktop/Work/autokitteh/ui/node_modules/svelte/internal/index.js:1758:22)
    at Object.default (root.svelte:43:39)
    at eval (/src/routes/__layout.svelte:22:66)
    at Object.$$render (/Users/swyx/Desktop/Work/autokitteh/ui/node_modules/svelte/internal/index.js:1758:22)
    at root.svelte:37:37
    at $$render (/Users/swyx/Desktop/Work/autokitteh/ui/node_modules/svelte/internal/index.js:1758:22)
    at Object.render (/Users/swyx/Desktop/Work/autokitteh/ui/node_modules/svelte/internal/index.js:1766:26)

[amen-souissi]

Hello @sw-yx and thanks for this issue! index.svelte Line 11: const queryResult = useQuery('repoData', () => fetch('/api').then((res) => res.json())); Must be defined inside the provider.

index.svelte:

<script>
    import Counter from '$lib/Counter.svelte';
    import { QueryClient, QueryClientProvider } from '@sveltestack/svelte-query';
    const queryClient = new QueryClient();
</script>

<QueryClientProvider client={queryClient}>
    <section>
        <h1>Welcome</h1>

        <pre>
        <MyComponent />
    </pre>
        <Counter />
    </section>
</QueryClientProvider>

MyComponent.svelte:

<script>
    import { useQuery } from '@sveltestack/svelte-query';
    const queryResult = useQuery('repoData', () => fetch('/api').then((res) => res.json()));
</script>

...
 {JSON.stringify(queryResult, null, 2)}
...

Thanks!