T
TanStack•3y ago
other-emerald

use createQuery inside of top level `+layout.svelte`

I am using SvelteKit and attempting to plug in SvelteQuery In my +layout.svelte file I would like to fetch some data and populate a search index to make the search index globally available to the rest of the application On of the problems I am having is I can't figure out how to use Svelte Query in the +layout.svelte file +layout.svelte: 
    $: playersQuery = createQuery<Record<number, Player>, Error>({
        queryKey: ['players', league],
        queryFn: () => getPlayers(league),
    });
    $: players = $playersQuery.data || {};
    $: playersQuery = createQuery<Record<number, Player>, Error>({
        queryKey: ['players', league],
        queryFn: () => getPlayers(league),
    });
    $: players = $playersQuery.data || {};
but I end up with an error: 
Error: No QueryClient was found in Svelte context. Did you forget to wrap your component with QueryClientProvider?
Error: No QueryClient was found in Svelte context. Did you forget to wrap your component with QueryClientProvider?
and I see why, because I have wrapped my application with the QueryClientProvider: 
<QueryClientProvider client={data.queryClient}>
    <App ... />
</QueryClientProvider>
<QueryClientProvider client={data.queryClient}>
    <App ... />
</QueryClientProvider>
so it makes sense that it would be available to other components, and not available in the +layout.svelte context Is it possible to pass the queryClient to the createQuery function? or something that would allow me to use SvelteQuery to fetch the data in the +layout.svelte file at the root of the application?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?