docs(svelte-query): use PersistQueryClientProvider in basic example

Author: lachlancollins

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",

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>