What is the right way to import queryClient with SSR?

Hey,

I am kinda confused what is the right way to access the

QueryClient

QueryClient

QueryClient

QueryClient object in Svelte?

I found two options:

1. Getting it from "hook"

import { useQueryClient } from '@tanstack/svelte-query';

const queryClient = useQueryClient();

import { useQueryClient } from '@tanstack/svelte-query';

const queryClient = useQueryClient();

import { useQueryClient } from '@tanstack/svelte-query';

const queryClient = useQueryClient();

import { useQueryClient } from '@tanstack/svelte-query';

const queryClient = useQueryClient();

2. Accessing it from page data

const queryClient = $page.data.queryClient;
// or
$: queryClient = $page.data.queryClient;

const queryClient = $page.data.queryClient;
// or
$: queryClient = $page.data.queryClient;

const queryClient = $page.data.queryClient;
// or
$: queryClient = $page.data.queryClient;

const queryClient = $page.data.queryClient;
// or
$: queryClient = $page.data.queryClient;

Both of these examples have

QueryClientProvider

QueryClientProvider

QueryClientProvider

QueryClientProvider in top root layout.

<QueryClientProvider client={queryClient}>
  <slot />
</QueryClientProvider>

<QueryClientProvider client={queryClient}>
  <slot />
</QueryClientProvider>

<QueryClientProvider client={queryClient}>
  <slot />
</QueryClientProvider>

<QueryClientProvider client={queryClient}>
  <slot />
</QueryClientProvider>