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

[saent-x]

Oh I see...

so I updated this to follow the docs implementation;

for +page.ts

import { client, orpc } from '$lib/orpc';

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

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

For +page.svelte i have;

<script lang="ts">
  import { orpc, client } from '$lib/orpc';
  import { createQuery } from '@tanstack/svelte-query';
  import LoadingState from '$lib/components/loading-state.svelte';
  import ErrorState from '$lib/components/error-state.svelte';

  // or maybe if i am using the client i have to return the result of the promise??
  let query = createQuery(
    orpc.agents.list.queryOptions({
      queryKey: ['agents']
    })
  );
  console.log(`status -> ${$query.status}`);
</script>

{#if $query.isPending}
  <LoadingState title="Retrieving Agents" description="This shouldn't take too long..." />
{:else if $query.isError}
  <ErrorState title="Failed to load agents" description="Please try again later..." />
{:else if $query.isSuccess}
  <p>{$query.data[0].instructions}</p>
{/if}

And for the layout;

import { browser } from '$app/environment';
import { QueryClient } from '@tanstack/svelte-query';

export const load = async () => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        enabled: browser,
        // staleTime: 5 * 60 * 1000
      }
    }
  });
  
  return {
    queryClient
  }
};

I discovered that If I have the prefetch query function within the +page.ts it affects any subsequent http calls, it basically blocks them. but If i remove it then it doesn't. Im not exactly sure how to implement prefetching using @tanstack/svelte-query... I am using the query to call a test rpc procedure that has a 5 sec timeout so then delay affects subsequent http requests which shouldn't happen...

[saent-x]

I think I can make the prefetch non-blocking by letting it run in the background, there by removing the await on the prefetchQuery function. But not exactly sure if this is the best way to go

[gregmsanderson]

Yep, with await it will block. Without, it won't.

I don't know I'm afraid.

This example is from Tanstack Router which does support doing that. But it may not directly translate across to Sveltekit's load function. It shows you can prefetch data without waiting for it:

export const Route = createFileRoute('/issues/$issueId')({
  loader: ({ context: { queryClient }, params: { issueId } }) => {
    void queryClient.prefetchQuery(issueQuery(issueId))
  },
  component: Issues,
})

... then you'd handle the await part in the component.

[saent-x]

Thanks for your help @gregmsanderson , the prefetching appears to work well without the await and it isn't blocking subsequent HTTP calls.