docs(svelte-query): add persist to basic example (#7807)

TanStack · Jul 28, 2024 · 99f1250 · 99f1250
1 parent fcac011
commit 99f1250
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git 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
@@ -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