T
TanStack•3mo ago
like-gold

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
  };
};
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()
  });
};
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.
1 Reply
exotic-emerald
exotic-emerald•7d ago
Hi there, I think I'd probably need a full repro to fully debug this. But check out the docs here: https://tanstack.com/query/latest/docs/framework/svelte/ssr and example here: https://github.com/TanStack/query/tree/main/examples/svelte/ssr
SSR and SvelteKit | TanStack Query Svelte Docs
Setup SvelteKit defaults to rendering routes with SSR. Because of this, you need to disable the query on the server. Otherwise, your query will continue executing on the server asynchronously, even af...
GitHub
query/examples/svelte/ssr at main · TanStack/query
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query

Did you find this page helpful?