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

lachlancollins · web-flow · commit 86161ca6ec7b · 2023-01-14T17:25:20.000+01:00
* Add recommended defaults to prefetch example

* Move SSR docs up in sidebar
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 }
 }
 ```

Original file line number	Diff line number	Diff line change
`@@ -695,13 +695,13 @@`
`695`	`695`	`"label": "Installation",`
`696`	`696`	`"to": "svelte/installation"`
`697`	`697`	`},`
`698`		`- {`
`699`		`- "label": "Reactivity",`
`700`		`- "to": "svelte/reactivity"`
`701`		`- },`
`702`	`698`	`{`
`703`	`699`	`"label": "SSR & SvelteKit",`
`704`	`700`	`"to": "svelte/ssr"`
	`701`	`+ },`
	`702`	`+ {`
	`703`	`+ "label": "Reactivity",`
	`704`	`+ "to": "svelte/reactivity"`
`705`	`705`	`}`
`706`	`706`	`]`
`707`	`707`	`},`