TanStackT
TanStack•7mo ago•
1 reply
colossal-harlequin

Svelte Query Prefetching

How can I prefetch queries in svelte kit?

The first issue i faced is passing the queryClient from +page.server.ts like this;
import { browser } from '$app/environment';
import { QueryClient } from '@tanstack/svelte-query';

export const load = async () => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        enabled: browser,
        staleTime: Infinity
      }
    }
  });

  return {
    queryClient
  };
};

but I get this error from sveltekit "Cannot stringify arbitrary non-POJOs (data.queryClient)" so I have to create the client in the page component...

My plan was to use it in another +page.server.ts like this;
import { orpc } from '$lib/orpc';

export const load = async ({ parent }) => {
  
  const { queryClient } = await parent();

  await queryClient.prefetchQuery({
    queryKey: ['agents'],
    queryFn: () => orpc.agents.list.queryOptions()
  });
};

but since i cannot pass the queryClient i can't do that, and if I pass the client in the component i can't access in in the second +page.server.ts to prefetch.

any help with this would be appreciated, thanks.
Was this page helpful?