ratty-blush

What is the right way to import queryClient with SSR?

Hey, I am kinda confused what is the right way to access the 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();

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;

Both of these examples have QueryClientProvider in top root layout.

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

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

2 Replies

ratty-blushOP•3y ago

Why am I asking? I would like to invalidate some queries when some event happens and I am not sure which method to choose. First method:

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

const queryClient = useQueryClient();


{
  onSubmit: () => {
    queryClient.refetchQueries({ ... });
  }
}

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

const queryClient = useQueryClient();


{
  onSubmit: () => {
    queryClient.refetchQueries({ ... });
  }
}

Second method:

{
  onSubmit: () => {
    $pade.data.queryClient.refetchQueries({ ... });
  }
}

{
  onSubmit: () => {
    $pade.data.queryClient.refetchQueries({ ... });
  }
}

plain-purple•3y ago

Either is fine, I probably lean more towards useQueryClient since that's the way I used to use it in react-query.

Gaming

Programming

What is the right way to import queryClient with SSR?

Did you find this page helpful?