docs(svelte-query): Add recommended defaults to prefetchQuery setup (#…

…4815) * Add recommended defaults to prefetch example * Move SSR docs up in sidebar
TanStack · Jan 14, 2023 · 86161ca · 86161ca
1 parent 832d4fb
commit 86161ca
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -695,13 +695,13 @@
               "label": "Installation",
               "to": "svelte/installation"
             },
-            {
-              "label": "Reactivity",
-              "to": "svelte/reactivity"
-            },
             {
               "label": "SSR & SvelteKit",
               "to": "svelte/ssr"
+            },
+            {
+              "label": "Reactivity",
+              "to": "svelte/reactivity"
             }
           ]
         },

diff --git a/docs/svelte/overview.md b/docs/svelte/overview.md
@@ -11,7 +11,7 @@ Include the QueryClientProvider near the root of your project:
 
 ```markdown
 <script lang="ts">
-  import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
+  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
   import Example from './lib/Example.svelte'
 
   const queryClient = new QueryClient()

diff --git a/docs/svelte/ssr.md b/docs/svelte/ssr.md
@@ -9,10 +9,12 @@ SvelteKit defaults to rendering routes with SSR. Because of this, you need to di
 
 The recommended way to achieve this is to use the `browser` module from SvelteKit in your `QueryClient` object. This will not disable `queryClient.prefetchQuery()`, which is used in one of the solutions below.
 
+**src/routes/+layout.svelte**
+
 ```markdown
 <script lang="ts">
   import { browser } from '$app/environment'
-  import { QueryClient } from '@tanstack/svelte-query'
+  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
 
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -83,11 +85,19 @@ Svelte Query supports prefetching queries on the server. Using this setup below,
 **src/routes/+layout.ts**
 
 ```ts
+import { browser } from '$app/environment'
 import { QueryClient } from '@tanstack/svelte-query'
 import type { LayoutLoad } from './$types'
 
 export const load: LayoutLoad = async () => {
-  const queryClient = new QueryClient()
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        enabled: browser,
+      },
+    },
+  })
+
   return { queryClient }
 }
 ```