From 86161ca6ec7b29f71576b555206aca04831499e6 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 15 Jan 2023 03:25:20 +1100
Subject: [PATCH] docs(svelte-query): Add recommended defaults to prefetchQuery
 setup (#4815)

* Add recommended defaults to prefetch example

* Move SSR docs up in sidebar
---
 docs/config.json        |  8 ++++----
 docs/svelte/overview.md |  2 +-
 docs/svelte/ssr.md      | 14 ++++++++++++--
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/docs/config.json b/docs/config.json
index 95329df12e..8474602959 100644
--- 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
index 79e40a8c53..14fb67c81a 100644
--- 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
index 84e21596be..c9b6f210aa 100644
--- 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 }
 }
 ```