Prefetch Queries in Sveltekit

[saent-x]

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.

[gregmsanderson]

Hi,

I'm not sure but the docs seem to suggest you can't:

Will not work with +page.server.ts/+layout.server.ts load functions

Could you use +page.ts like in their example?

https://tanstack.com/query/latest/docs/framework/svelte/ssr#using-prefetchquery