query: SSR & SvelteKit prefetching example doesn't work as expected

Describe the bug

The docs (https://tanstack.com/query/latest/docs/svelte/ssr#using-prefetchquery) says that when using prefetchQuery in +page.ts, a refetch won’t be triggered when calling createQuery in +page.svelte (with the same query key of course).

After following the documentation, it seems it doesn’t work that way and a refetch does happen.

The example provided in documentation also clearly show this behaviour as shown in the screenshots below (the 3rd “posts” in the 2nd screenshots comes from refetchOnWindowFocus: true).

If I set staleTime: Infinity then the 2nd fetch doesn’t happen but then refetchOnWindowFocus doesn’t get triggered anymore.

Your minimal, reproducible example

https://codesandbox.io/s/github/tanstack/query/tree/main/examples/svelte/ssr?from-embed

Steps to reproduce

Just follow the example at https://tanstack.com/query/latest/docs/svelte/examples/svelte/ssr

Expected behavior

The query should not run a 2nd time

How often does this bug happen?

Every time

Screenshots or Videos

Platform

OS: macOS 13.0.1
Browser : all of them

TanStack Query version

4.24.10

TypeScript version

4.9.3

Additional context

No response

About this issue

Original URL
State: closed
Created a year ago
Comments: 15 (2 by maintainers)

Most upvoted comments

@bevm0 thanks for the solution!

lachlancollins on Apr 8, 2023

It seems to work when using SvelteKit’s custom fetch function provided to load functions. Here’s modified example of the original sandbox demonstrating this.

Here, getPosts accepts an optional customFetch argument, which defaults to the global fetch function when not provided. Maybe the last bullet point explains why it’s able to cache the query properly in the query client with this approach?

Changes:

// src/lib/getPosts.ts
export const getPosts = async (
  limit: number,
  customFetch: RequestEvent["fetch"] = fetch
) => {
  const response = await customFetch(
    "https://jsonplaceholder.typicode.com/posts"
  );
  const data = (await response.json()) as Post[];
  return data.filter((x) => x.id <= limit);
};

// src/routes/+page.ts
export const load: PageLoad = async ({ parent, fetch }) => {
  const { queryClient } = await parent()

  await queryClient.prefetchQuery({
    queryKey: ['posts', 10],
    queryFn: () => getPosts(10, fetch),
  })
}

ap0nia on Apr 7, 2023