T
TanStack•3y ago
yelping-magenta

Svelte-query - undefined queryclient

I want to integrate svelte-query in sveltekit app , as given in docs I have done all installation and setup but am getting this weird error in console cannot read properties of undefined (QueryClient) I have declared the variable let queryclient = new QueryClient(), Just dont know what's wrong in here Thanks!
5 Replies
foreign-sapphire
foreign-sapphire•3y ago
Hi @Devr , can you share the file this is from? It looks like you might need to import QueryClient
yelping-magenta
yelping-magentaOP•3y ago
<script lang="ts">
  import("../app.css");
  import { beforeNavigate, afterNavigate } from "$app/navigation";
  import type { LayoutData } from "./$types";
  import { cachedpost, clientUser } from "$lib/stores";
  import Nav from "$lib/Nav.svelte";
  import { onMount } from "svelte";
  import { QueryClientProvider,QueryClient } from '@tanstack/svelte-query'

 export let data: LayoutData;
const queryClient = new QueryClient()

  $: loading = false;
  
  $:{
    if(data.clientuser){
      clientUser.set(data.clientuser)
    }
  }
  
  beforeNavigate((nav) => {
    loading = true;
  });
  afterNavigate(() => {
    loading = false;
  });
  
   sb.auth.onAuthStateChange((event, session) => {
    let token = session?.access_token;
    if (event == "SIGNED_OUT") {
      Cookie.remove("userSession");
    }
    if (event == "SIGNED_IN" && token) {
      Cookie.set("userSession", token);
    }
  });
  
</script>
{#if loading}
  <p>Loading..,</p>
{:else}
<QueryClientProvider client={queryClient}>
   <Nav />
  <slot />
</QueryClientProvider>
{/if} 
<script lang="ts">
  import("../app.css");
  import { beforeNavigate, afterNavigate } from "$app/navigation";
  import type { LayoutData } from "./$types";
  import { cachedpost, clientUser } from "$lib/stores";
  import Nav from "$lib/Nav.svelte";
  import { onMount } from "svelte";
  import { QueryClientProvider,QueryClient } from '@tanstack/svelte-query'

 export let data: LayoutData;
const queryClient = new QueryClient()

  $: loading = false;
  
  $:{
    if(data.clientuser){
      clientUser.set(data.clientuser)
    }
  }
  
  beforeNavigate((nav) => {
    loading = true;
  });
  afterNavigate(() => {
    loading = false;
  });
  
   sb.auth.onAuthStateChange((event, session) => {
    let token = session?.access_token;
    if (event == "SIGNED_OUT") {
      Cookie.remove("userSession");
    }
    if (event == "SIGNED_IN" && token) {
      Cookie.set("userSession", token);
    }
  });
  
</script>
{#if loading}
  <p>Loading..,</p>
{:else}
<QueryClientProvider client={queryClient}>
   <Nav />
  <slot />
</QueryClientProvider>
{/if}
@Raytuzio I only have this code in my +layout.svelte
foreign-sapphire
foreign-sapphire•3y ago
Okay, that seems set up correctly, what are you calling and where are you getting the error?
yelping-magenta
yelping-magentaOP•3y ago
Hey @Raytuzio actually my issue is resolved, I just saw docs and there's something updated with that queries doesn't run server, So I guess that was causing the issue and now its all good , Thanks!
foreign-sapphire
foreign-sapphire•3y ago
Great, I've been editing the docs as people have been reporting issues, I've now settled on what I think is the best way to use it with sveltekit so hopefully no more changes!

Did you find this page helpful?