From f51b1e8ce9ae8c66ec208efcf994dd42022901de Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 28 Jul 2024 12:31:52 +1000
Subject: [PATCH] docs(svelte-query): use PersistQueryClientProvider in basic
 example

---
 examples/svelte/basic/package.json              |  4 +++-
 examples/svelte/basic/src/routes/+layout.svelte | 12 +++++++++---
 pnpm-lock.yaml                                  |  6 ++++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/examples/svelte/basic/package.json b/examples/svelte/basic/package.json
index 84b0c8208c..e8b323210b 100644
--- a/examples/svelte/basic/package.json
+++ b/examples/svelte/basic/package.json
@@ -9,8 +9,10 @@
     "test:types": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
+    "@tanstack/query-sync-storage-persister": "^5.51.15",
     "@tanstack/svelte-query": "^5.51.15",
-    "@tanstack/svelte-query-devtools": "^5.51.15"
+    "@tanstack/svelte-query-devtools": "^5.51.15",
+    "@tanstack/svelte-query-persist-client": "^5.51.15"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.2",
diff --git a/examples/svelte/basic/src/routes/+layout.svelte b/examples/svelte/basic/src/routes/+layout.svelte
index ef60a2f559..da5d841b0b 100644
--- a/examples/svelte/basic/src/routes/+layout.svelte
+++ b/examples/svelte/basic/src/routes/+layout.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import '../app.css'
   import { browser } from '$app/environment'
-  import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
+  import { QueryClient } from '@tanstack/svelte-query'
   import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+  import { PersistQueryClientProvider } from '@tanstack/svelte-query-persist-client'
+  import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
 
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -11,11 +13,15 @@
       },
     },
   })
+
+  const persister = createSyncStoragePersister({
+    storage: browser ? window.localStorage : null,
+  })
 </script>
 
-<QueryClientProvider client={queryClient}>
+<PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
   <main>
     <slot />
   </main>
   <SvelteQueryDevtools />
-</QueryClientProvider>
+</PersistQueryClientProvider>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 79ed9bbed3..697a4f0ce2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1295,12 +1295,18 @@ importers:
 
   examples/svelte/basic:
     dependencies:
+      '@tanstack/query-sync-storage-persister':
+        specifier: ^5.51.15
+        version: link:../../../packages/query-sync-storage-persister
       '@tanstack/svelte-query':
         specifier: ^5.51.15
         version: link:../../../packages/svelte-query
       '@tanstack/svelte-query-devtools':
         specifier: ^5.51.15
         version: link:../../../packages/svelte-query-devtools
+      '@tanstack/svelte-query-persist-client':
+        specifier: ^5.51.15
+        version: link:../../../packages/svelte-query-persist-client
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2