T
TanStack•2mo ago
optimistic-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.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?