diff --git a/examples/svelte/auto-refetching/package.json b/examples/svelte/auto-refetching/package.json
index 4c09dd93d4..735bd049aa 100644
--- a/examples/svelte/auto-refetching/package.json
+++ b/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",
diff --git a/examples/svelte/auto-refetching/src/routes/+layout.svelte b/examples/svelte/auto-refetching/src/routes/+layout.svelte
index 8c686d17ed..ef60a2f559 100644
--- a/examples/svelte/auto-refetching/src/routes/+layout.svelte
+++ b/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>
diff --git a/examples/svelte/auto-refetching/src/routes/+page.svelte b/examples/svelte/auto-refetching/src/routes/+page.svelte
index f30fdb7cbe..a72534d714 100644
--- a/examples/svelte/auto-refetching/src/routes/+page.svelte
+++ b/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>
 
diff --git a/examples/svelte/auto-refetching/src/routes/api/data/+server.ts b/examples/svelte/auto-refetching/src/routes/api/data/+server.ts
index 5b12a9d23c..863c0feadf 100644
--- a/examples/svelte/auto-refetching/src/routes/api/data/+server.ts
+++ b/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 }) => {
diff --git a/examples/svelte/basic/package.json b/examples/svelte/basic/package.json
index 3d7344f901..328f42485c 100644
--- a/examples/svelte/basic/package.json
+++ b/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",
diff --git a/examples/svelte/basic/src/routes/+layout.svelte b/examples/svelte/basic/src/routes/+layout.svelte
index 8c686d17ed..ef60a2f559 100644
--- a/examples/svelte/basic/src/routes/+layout.svelte
+++ b/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>
diff --git a/examples/svelte/load-more-infinite-scroll/package.json b/examples/svelte/load-more-infinite-scroll/package.json
index 24e8897f0a..c51d681a06 100644
--- a/examples/svelte/load-more-infinite-scroll/package.json
+++ b/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",
diff --git a/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte b/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte
index 2c12e71a5e..2fa7ce86fc 100644
--- a/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte
+++ b/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)
diff --git a/examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte b/examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte
index 8c686d17ed..ef60a2f559 100644
--- a/examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte
+++ b/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>
diff --git a/examples/svelte/optimistic-updates-typescript/package.json b/examples/svelte/optimistic-updates-typescript/package.json
index 4646994feb..b7f0879004 100644
--- a/examples/svelte/optimistic-updates-typescript/package.json
+++ b/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",
diff --git a/examples/svelte/optimistic-updates-typescript/src/routes/+layout.svelte b/examples/svelte/optimistic-updates-typescript/src/routes/+layout.svelte
index 8c686d17ed..ef60a2f559 100644
--- a/examples/svelte/optimistic-updates-typescript/src/routes/+layout.svelte
+++ b/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>
diff --git a/examples/svelte/optimistic-updates-typescript/src/routes/+page.svelte b/examples/svelte/optimistic-updates-typescript/src/routes/+page.svelte
index 5b6139410b..297c462b71 100644
--- a/examples/svelte/optimistic-updates-typescript/src/routes/+page.svelte
+++ b/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>
diff --git a/examples/svelte/playground/package.json b/examples/svelte/playground/package.json
index c76cab8bab..9e9984597c 100644
--- a/examples/svelte/playground/package.json
+++ b/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",
diff --git a/examples/svelte/playground/src/routes/+layout.svelte b/examples/svelte/playground/src/routes/+layout.svelte
index 8219a09ca9..1b9267032c 100644
--- a/examples/svelte/playground/src/routes/+layout.svelte
+++ b/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>
diff --git a/examples/svelte/playground/src/routes/AddTodo.svelte b/examples/svelte/playground/src/routes/AddTodo.svelte
index 88a71b7cf3..09d94ca14d 100644
--- a/examples/svelte/playground/src/routes/AddTodo.svelte
+++ b/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
diff --git a/examples/svelte/playground/src/routes/EditTodo.svelte b/examples/svelte/playground/src/routes/EditTodo.svelte
index 24d7992e00..1d2789ab3e 100644
--- a/examples/svelte/playground/src/routes/EditTodo.svelte
+++ b/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} />
diff --git a/examples/svelte/simple/package.json b/examples/svelte/simple/package.json
index ec4f669ec2..be2b5a4eea 100644
--- a/examples/svelte/simple/package.json
+++ b/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",
diff --git a/examples/svelte/simple/src/App.svelte b/examples/svelte/simple/src/App.svelte
index 76097f7e67..085c4abc24 100644
--- a/examples/svelte/simple/src/App.svelte
+++ b/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>
diff --git a/examples/svelte/ssr/package.json b/examples/svelte/ssr/package.json
index d1b82f1d84..f559989d13 100644
--- a/examples/svelte/ssr/package.json
+++ b/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",
diff --git a/examples/svelte/ssr/src/routes/+layout.svelte b/examples/svelte/ssr/src/routes/+layout.svelte
index 17e4438650..d639174e3f 100644
--- a/examples/svelte/ssr/src/routes/+layout.svelte
+++ b/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>
diff --git a/examples/svelte/star-wars/package.json b/examples/svelte/star-wars/package.json
index 051e2432a6..bd7b0f994a 100644
--- a/examples/svelte/star-wars/package.json
+++ b/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",
diff --git a/examples/svelte/star-wars/src/routes/+layout.svelte b/examples/svelte/star-wars/src/routes/+layout.svelte
index 36d59c23a8..d11124d6fe 100644
--- a/examples/svelte/star-wars/src/routes/+layout.svelte
+++ b/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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62c2ff3ce0..262bfb5c6a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1015,6 +1015,9 @@ importers:
       '@tanstack/svelte-query':
         specifier: ^5.0.0-alpha.38
         version: link:../../../packages/svelte-query
+      '@tanstack/svelte-query-devtools':
+        specifier: workspace:5.0.0-alpha.39
+        version: link:../../../packages/svelte-query-devtools
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^2.1.0
@@ -1043,6 +1046,9 @@ importers:
       '@tanstack/svelte-query':
         specifier: ^5.0.0-alpha.38
         version: link:../../../packages/svelte-query
+      '@tanstack/svelte-query-devtools':
+        specifier: workspace:5.0.0-alpha.39
+        version: link:../../../packages/svelte-query-devtools
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^2.1.0
@@ -1071,6 +1077,9 @@ importers:
       '@tanstack/svelte-query':
         specifier: ^5.0.0-alpha.38
         version: link:../../../packages/svelte-query
+      '@tanstack/svelte-query-devtools':
+        specifier: workspace:5.0.0-alpha.39
+        version: link:../../../packages/svelte-query-devtools
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^2.1.0
@@ -1099,6 +1108,9 @@ importers:
       '@tanstack/svelte-query':
         specifier: ^5.0.0-alpha.38
         version: link:../../../packages/svelte-query
+      '@tanstack/svelte-query-devtools':
+        specifier: workspace:5.0.0-alpha.39
+        version: link:../../../packages/svelte-query-devtools
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^2.1.0
@@ -1127,6 +1139,9 @@ importers:
       '@tanstack/svelte-query':
         specifier: ^5.0.0-alpha.38
         version: link:../../../packages/svelte-query
+      '@tanstack/svelte-query-devtools':
+        specifier: workspace:5.0.0-alpha.39
+        version: link:../../../packages/svelte-query-devtools
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^2.1.0
@@ -1155,6 +1170,9 @@ importers:
       '@tanstack/svelte-query':
         specifier: ^5.0.0-alpha.38
         version: link:../../../packages/svelte-query
+      '@tanstack/svelte-query-devtools':
+        specifier: workspace:5.0.0-alpha.39
+        version: link:../../../packages/svelte-query-devtools
     devDependencies:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^2.4.0
@@ -1183,6 +1201,9 @@ importers:
       '@tanstack/svelte-query':
         specifier: ^5.0.0-alpha.38
         version: link:../../../packages/svelte-query
+      '@tanstack/svelte-query-devtools':
+        specifier: workspace:5.0.0-alpha.39
+        version: link:../../../packages/svelte-query-devtools
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^2.1.0
@@ -1211,6 +1232,9 @@ importers:
       '@tanstack/svelte-query':
         specifier: ^5.0.0-alpha.38
         version: link:../../../packages/svelte-query
+      '@tanstack/svelte-query-devtools':
+        specifier: workspace:5.0.0-alpha.39
+        version: link:../../../packages/svelte-query-devtools
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^2.1.0