docs(svelte-query): Add svelte-query-devtools to examples (#5478)

Author: lachlancollins

examples/svelte/auto-refetching/package.json

@@ -10,7 +10,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@tanstack/svelte-query": "^5.0.0-alpha.38"
+    "@tanstack/svelte-query": "^5.0.0-alpha.38",
+    "@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",

examples/svelte/auto-refetching/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
   import '../app.css'
   import { browser } from '$app/environment'
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -16,4 +17,5 @@
   <main>
     <slot />
   </main>
+  <SvelteQueryDevtools />
 </QueryClientProvider>

examples/svelte/auto-refetching/src/routes/+page.svelte

@@ -22,12 +22,12 @@
   const addMutation = createMutation({
     mutationFn: (value: string) =>
       fetch(`${endpoint}?add=${value}`).then((r) => r.json()),
-    onSuccess: () => client.invalidateQueries(['refetch']),
+    onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
   })
 
   const clearMutation = createMutation({
     mutationFn: () => fetch(`${endpoint}?clear=1`).then((r) => r.json()),
-    onSuccess: () => client.invalidateQueries(['refetch']),
+    onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
   })
 </script>
 

examples/svelte/auto-refetching/src/routes/api/data/+server.ts

@@ -1,6 +1,6 @@
 import { json, type RequestHandler } from '@sveltejs/kit'
 
-let list = { items: ['Item 1', 'Item 2', 'Item 3'] }
+const list = { items: ['Item 1', 'Item 2', 'Item 3'] }
 
 /** @type {import('./$types').RequestHandler} */
 export const GET: RequestHandler = async ({ url }) => {

examples/svelte/basic/package.json

@@ -10,7 +10,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@tanstack/svelte-query": "^5.0.0-alpha.38"
+    "@tanstack/svelte-query": "^5.0.0-alpha.38",
+    "@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",

examples/svelte/basic/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
   import '../app.css'
   import { browser } from '$app/environment'
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -16,4 +17,5 @@
   <main>
     <slot />
   </main>
+  <SvelteQueryDevtools />
 </QueryClientProvider>

examples/svelte/load-more-infinite-scroll/package.json

@@ -10,7 +10,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@tanstack/svelte-query": "^5.0.0-alpha.38"
+    "@tanstack/svelte-query": "^5.0.0-alpha.38",
+    "@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",

examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte

@@ -8,8 +8,8 @@
 
   const query = createInfiniteQuery({
     queryKey: ['planets'],
-    queryFn: fetchPlanets,
-    //@ts-ignore
+    queryFn: ({ pageParam }) => fetchPlanets({ pageParam }),
+    defaultPageParam: 1,
     getNextPageParam: (lastPage) => {
       if (lastPage.next) {
         const nextUrl = new URLSearchParams(new URL(lastPage.next).search)

examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
   import '../app.css'
   import { browser } from '$app/environment'
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -16,4 +17,5 @@
   <main>
     <slot />
   </main>
+  <SvelteQueryDevtools />
 </QueryClientProvider>

examples/svelte/optimistic-updates-typescript/package.json

@@ -10,7 +10,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@tanstack/svelte-query": "^5.0.0-alpha.38"
+    "@tanstack/svelte-query": "^5.0.0-alpha.38",
+    "@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",

examples/svelte/optimistic-updates-typescript/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
   import '../app.css'
   import { browser } from '$app/environment'
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -16,4 +17,5 @@
   <main>
     <slot />
   </main>
+  <SvelteQueryDevtools />
 </QueryClientProvider>

examples/svelte/optimistic-updates-typescript/src/routes/+page.svelte

@@ -46,7 +46,7 @@
     onMutate: async (newTodo: string) => {
       text = ''
       // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-      await client.cancelQueries(['optimistic'])
+      await client.cancelQueries({ queryKey: ['optimistic'] })
 
       // Snapshot the previous value
       const previousTodos = client.getQueryData<Todos>(['optimistic'])
@@ -72,7 +72,7 @@
     },
     // Always refetch after error or success:
     onSettled: () => {
-      client.invalidateQueries(['optimistic'])
+      client.invalidateQueries({ queryKey: ['optimistic'] })
     },
   })
 </script>

examples/svelte/playground/package.json

@@ -10,7 +10,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@tanstack/svelte-query": "^5.0.0-alpha.38"
+    "@tanstack/svelte-query": "^5.0.0-alpha.38",
+    "@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",

examples/svelte/playground/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
   import '../app.css'
   import { browser } from '$app/environment'
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -20,4 +21,5 @@
   <div id="app">
     <slot />
   </div>
+  <SvelteQueryDevtools />
 </QueryClientProvider>

examples/svelte/playground/src/routes/AddTodo.svelte

@@ -12,7 +12,7 @@
 
   let name = ''
 
-  const postTodo = async ({ name, notes }) => {
+  const postTodo = async ({ name, notes }: { name: string; notes: string }) => {
     console.info('postTodo', { name, notes })
     return new Promise((resolve, reject) => {
       setTimeout(() => {
@@ -41,7 +41,7 @@
   <input bind:value={name} disabled={$addMutation.status === 'pending'} />
 
   <button
-    on:click={() => $addMutation.mutate({ name })}
+    on:click={() => $addMutation.mutate({ name, notes: name })}
     disabled={$addMutation.status === 'pending' || !name}
   >
     Add Todo

examples/svelte/playground/src/routes/EditTodo.svelte

@@ -12,9 +12,11 @@
     editingIndex,
   } from '../lib/stores'
 
+  type Todo = { id: number; name: string; notes: string }
+
   const queryClient = useQueryClient()
 
-  const fetchTodoById = async ({ id }: { id: number }) => {
+  const fetchTodoById = async ({ id }: { id: number }): Promise<Todo> => {
     console.info('fetchTodoById', { id })
     return new Promise((resolve, reject) => {
       setTimeout(() => {
@@ -23,18 +25,27 @@
             new Error(JSON.stringify({ fetchTodoById: { id } }, null, 2)),
           )
         }
-        resolve($list.find((d) => d.id === id))
+        const todo = $list.find((d) => d.id === id)
+        if (!todo) {
+          return reject(
+            new Error(JSON.stringify({ fetchTodoById: { id } }, null, 2)),
+          )
+        }
+        resolve(todo)
       }, $queryTimeMin + Math.random() * ($queryTimeMax - $queryTimeMin))
     })
   }
 
-  function patchTodo(todo) {
+  function patchTodo(todo?: Todo): Promise<Todo> {
     console.info('patchTodo', todo)
     return new Promise((resolve, reject) => {
       setTimeout(() => {
         if (Math.random() < $errorRate) {
           return reject(new Error(JSON.stringify({ patchTodo: todo }, null, 2)))
         }
+        if (!todo) {
+          return reject(new Error(JSON.stringify({ patchTodo: todo }, null, 2)))
+        }
         list.set(
           $list.map((d) => {
             if (d.id === todo.id) {
@@ -86,7 +97,7 @@
     <span>
       Error! <button on:click={() => $query.refetch()}>Retry</button>
     </span>
-  {:else}
+  {:else if todo}
     <label>
       Name:{' '}
       <input bind:value={todo.name} disabled={disableEditSave} />

examples/svelte/simple/package.json

@@ -10,7 +10,8 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@tanstack/svelte-query": "^5.0.0-alpha.38"
+    "@tanstack/svelte-query": "^5.0.0-alpha.38",
+    "@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.4.0",

examples/svelte/simple/src/App.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
   import Simple from './lib/Simple.svelte'
 
   const queryClient = new QueryClient()
@@ -9,4 +10,5 @@
   <main>
     <Simple />
   </main>
+  <SvelteQueryDevtools />
 </QueryClientProvider>

examples/svelte/ssr/package.json

@@ -10,7 +10,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@tanstack/svelte-query": "^5.0.0-alpha.38"
+    "@tanstack/svelte-query": "^5.0.0-alpha.38",
+    "@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",

examples/svelte/ssr/src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import '../app.css'
   import { QueryClientProvider } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
   import type { PageData } from './$types'
 
   export let data: PageData
@@ -10,4 +11,5 @@
   <main>
     <slot />
   </main>
+  <SvelteQueryDevtools />
 </QueryClientProvider>

examples/svelte/star-wars/package.json

@@ -10,7 +10,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@tanstack/svelte-query": "^5.0.0-alpha.38"
+    "@tanstack/svelte-query": "^5.0.0-alpha.38",
+    "@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",

examples/svelte/star-wars/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
   import '../app.css'
   import { browser } from '$app/environment'
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -25,4 +26,5 @@
     <a href="/characters">Characters</a>
   </nav>
   <slot />
+  <SvelteQueryDevtools />
 </QueryClientProvider>