TanStack · lachlancollins · Sep 26, 2025 · Sep 26, 2025
diff --git a/docs/framework/react/devtools.md b/docs/framework/react/devtools.md
@@ -74,7 +74,7 @@ function App() {
 
 ### Options
 
-- `initialIsOpen: Boolean`
+- `initialIsOpen: boolean`
   - Set this `true` if you want the dev tools to default to being open
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
   - Defaults to `bottom-right`

diff --git a/docs/framework/solid/devtools.md b/docs/framework/solid/devtools.md
@@ -68,7 +68,7 @@ function App() {
 
 ### Options
 
-- `initialIsOpen: Boolean`
+- `initialIsOpen: boolean`
   - Set this `true` if you want the dev tools to default to being open
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
   - Defaults to `bottom-right`

diff --git a/docs/framework/svelte/devtools.md b/docs/framework/svelte/devtools.md
@@ -61,7 +61,7 @@ Place the following code as high in your Svelte app as you can. The closer it is
 
 ### Options
 
-- `initialIsOpen: Boolean`
+- `initialIsOpen: boolean`
   - Set this `true` if you want the dev tools to default to being open
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
   - Defaults to `bottom-right`

diff --git a/docs/framework/svelte/reactivity.md b/docs/framework/svelte/reactivity.md
@@ -11,13 +11,11 @@ In the below example, the `refetchInterval` option is set from the variable `int
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
 
-  const endpoint = 'http://localhost:5173/api/data'
-
   let intervalMs = 1000
 
   const query = createQuery({
     queryKey: ['refetch'],
-    queryFn: async () => await fetch(endpoint).then((r) => r.json()),
+    queryFn: async () => await fetch('/api/data').then((r) => r.json()),
     refetchInterval: intervalMs,
   })
 </script>
@@ -32,14 +30,12 @@ To solve this, we can convert `intervalMs` into a writable store. The query opti
   import { derived, writable } from 'svelte/store'
   import { createQuery } from '@tanstack/svelte-query'
 
-  const endpoint = 'http://localhost:5173/api/data'
-
   const intervalMs = writable(1000)
 
   const query = createQuery(
     derived(intervalMs, ($intervalMs) => ({
       queryKey: ['refetch'],
-      queryFn: async () => await fetch(endpoint).then((r) => r.json()),
+      queryFn: async () => await fetch('/api/data').then((r) => r.json()),
       refetchInterval: $intervalMs,
     })),
   )

diff --git a/docs/framework/vue/devtools.md b/docs/framework/vue/devtools.md
@@ -61,7 +61,7 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
 
 ### Options
 
-- `initialIsOpen: Boolean`
+- `initialIsOpen: boolean`
   - Set this `true` if you want the dev tools to default to being open.
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
   - Defaults to `bottom-right`.

diff --git a/examples/svelte/auto-refetching/src/routes/+page.svelte b/examples/svelte/auto-refetching/src/routes/+page.svelte
@@ -10,7 +10,7 @@
 
   const client = useQueryClient()
 
-  const endpoint = 'http://localhost:5173/api/data'
+  const endpoint = '/api/data'
 
   $: todos = createQuery<{ items: string[] }>({
     queryKey: ['refetch'],
@@ -21,7 +21,9 @@
 
   const addMutation = createMutation({
     mutationFn: (value: string) =>
-      fetch(`${endpoint}?add=${value}`).then((r) => r.json()),
+      fetch(`${endpoint}?add=${encodeURIComponent(value)}`).then((r) =>
+        r.json(),
+      ),
     onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
   })
 
@@ -31,7 +33,7 @@
   })
 </script>
 
-<h1>Auto Refetch with stale-time set to 1s</h1>
+<h1>Auto Refetch with stale-time set to {intervalMs}ms</h1>
 
 <p>
   This example is best experienced on your own machine, where you can open

diff --git a/examples/svelte/auto-refetching/svelte.config.js b/examples/svelte/auto-refetching/svelte.config.js
@@ -3,10 +3,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },

diff --git a/examples/svelte/basic/svelte.config.js b/examples/svelte/basic/svelte.config.js
@@ -3,10 +3,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },

diff --git a/examples/svelte/optimistic-updates/src/routes/+page.svelte b/examples/svelte/optimistic-updates/src/routes/+page.svelte
@@ -20,7 +20,7 @@
 
   const client = useQueryClient()
 
-  const endpoint = 'http://localhost:5173/api/data'
+  const endpoint = '/api/data'
 
   const fetchTodos = async (): Promise<Todos> =>
     await fetch(endpoint).then((r) => r.json())

diff --git a/examples/svelte/optimistic-updates/src/routes/api/data/+server.ts b/examples/svelte/optimistic-updates/src/routes/api/data/+server.ts
@@ -6,7 +6,7 @@ type Todo = {
   text: string
 }
 
-const items: Todo[] = []
+const items: Array<Todo> = []
 
 /** @type {import('./$types').RequestHandler} */
 export const GET: RequestHandler = async (req) => {

diff --git a/examples/svelte/optimistic-updates/svelte.config.js b/examples/svelte/optimistic-updates/svelte.config.js
@@ -3,10 +3,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },

diff --git a/examples/svelte/playground/svelte.config.js b/examples/svelte/playground/svelte.config.js
@@ -4,7 +4,6 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },

diff --git a/examples/svelte/simple/svelte.config.js b/examples/svelte/simple/svelte.config.js
@@ -1,7 +1,5 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 export default {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
 }
diff --git a/examples/svelte/ssr/src/routes/+layout.ts b/examples/svelte/ssr/src/routes/+layout.ts
@@ -2,7 +2,7 @@ import { browser } from '$app/environment'
 import { QueryClient } from '@tanstack/svelte-query'
 import type { LayoutLoad } from './$types'
 
-export const load: LayoutLoad = async () => {
+export const load: LayoutLoad = () => {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {

diff --git a/examples/svelte/ssr/svelte.config.js b/examples/svelte/ssr/svelte.config.js
@@ -3,10 +3,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },

diff --git a/examples/svelte/star-wars/src/routes/+page.svelte b/examples/svelte/star-wars/src/routes/+page.svelte
@@ -2,8 +2,7 @@
   <h2 class="text-4xl">React Query Demo</h2>
   <p>Using the Star Wars API</p>
   <p>
-    (Built by <a href="https://twitter.com/Brent_m_Clark">@Brent_m_Clark</a>
-    )
+    (Built by <a href="https://twitter.com/Brent_m_Clark">@Brent_m_Clark</a>)
   </p>
   <section>
     <h5 class="text-2xl">Why React Query?</h5>

diff --git a/examples/svelte/star-wars/svelte.config.js b/examples/svelte/star-wars/svelte.config.js
@@ -4,7 +4,6 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },

diff --git a/packages/svelte-query/tests/createMutation/FailureExample.svelte b/packages/svelte-query/tests/createMutation/FailureExample.svelte
@@ -19,5 +19,5 @@
 
 <div>Data: {$mutation.data?.count ?? 'undefined'}</div>
 <div>Status: {$mutation.status}</div>
-<div>Failure Count: {$mutation.failureCount ?? 'undefined'}</div>
-<div>Failure Reason: {$mutation.failureReason ?? 'null'}</div>
+<div>Failure Count: {$mutation.failureCount}</div>
+<div>Failure Reason: {$mutation.failureReason ?? 'undefined'}</div>
diff --git a/packages/svelte-query/tests/createMutation/createMutation.test.ts b/packages/svelte-query/tests/createMutation/createMutation.test.ts
@@ -93,6 +93,6 @@ describe('createMutation', () => {
     expect(rendered.getByText('Status: success')).toBeInTheDocument()
     expect(rendered.getByText('Data: 2')).toBeInTheDocument()
     expect(rendered.getByText('Failure Count: 0')).toBeInTheDocument()
-    expect(rendered.getByText('Failure Reason: null')).toBeInTheDocument()
+    expect(rendered.getByText('Failure Reason: undefined')).toBeInTheDocument()
   })
 })
diff --git a/packages/svelte-query/tests/useMutationState/BaseExample.svelte b/packages/svelte-query/tests/useMutationState/BaseExample.svelte
@@ -21,12 +21,11 @@
   const errorMutation = createMutation(errorMutationOpts)
 
   const mutationState = useMutationState(mutationStateOpts)
-  $: statuses = $mutationState.map((state) => state.status)
 </script>
 
-<div data-testid="result">
-  {JSON.stringify(statuses)}
-</div>
+<button on:click={() => $successMutation.mutate()}>Success</button>
+<button on:click={() => $errorMutation.mutate()}>Error</button>
 
-<button on:click={() => $successMutation.mutate()}>success</button>
-<button on:click={() => $errorMutation.mutate()}>error</button>
+<div>
+  Data: {JSON.stringify($mutationState.map((state) => state.status))}
+</div>
diff --git a/packages/svelte-query/tests/useMutationState/useMutationState.test.ts b/packages/svelte-query/tests/useMutationState/useMutationState.test.ts
@@ -33,15 +33,15 @@ describe('useMutationState', () => {
       },
     })
 
-    fireEvent.click(rendered.getByText('success'))
+    fireEvent.click(rendered.getByRole('button', { name: /Success/i }))
     await vi.advanceTimersByTimeAsync(11)
     expect(successMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByText('["success"]')).toBeInTheDocument()
+    expect(rendered.getByText('Data: ["success"]')).toBeInTheDocument()
 
-    fireEvent.click(rendered.getByText('error'))
+    fireEvent.click(rendered.getByRole('button', { name: /Error/i }))
     await vi.advanceTimersByTimeAsync(21)
     expect(errorMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByText('["success","error"]')).toBeInTheDocument()
+    expect(rendered.getByText('Data: ["success","error"]')).toBeInTheDocument()
   })
 
   test('Can select specific type of mutation ( i.e: error only )', async () => {
@@ -68,15 +68,15 @@ describe('useMutationState', () => {
       },
     })
 
-    fireEvent.click(rendered.getByText('success'))
+    fireEvent.click(rendered.getByRole('button', { name: /Success/i }))
     await vi.advanceTimersByTimeAsync(11)
     expect(successMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByText('[]')).toBeInTheDocument()
+    expect(rendered.getByText('Data: []')).toBeInTheDocument()
 
-    fireEvent.click(rendered.getByText('error'))
+    fireEvent.click(rendered.getByRole('button', { name: /Error/i }))
     await vi.advanceTimersByTimeAsync(21)
     expect(errorMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByText('["error"]')).toBeInTheDocument()
+    expect(rendered.getByText('Data: ["error"]')).toBeInTheDocument()
   })
 
   test('Can select specific mutation using mutation key', async () => {
@@ -103,14 +103,14 @@ describe('useMutationState', () => {
       },
     })
 
-    fireEvent.click(rendered.getByText('success'))
+    fireEvent.click(rendered.getByRole('button', { name: /Success/i }))
     await vi.advanceTimersByTimeAsync(11)
     expect(successMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByText('["success"]')).toBeInTheDocument()
+    expect(rendered.getByText('Data: ["success"]')).toBeInTheDocument()
 
-    fireEvent.click(rendered.getByText('error'))
+    fireEvent.click(rendered.getByRole('button', { name: /Error/i }))
     await vi.advanceTimersByTimeAsync(21)
     expect(errorMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByText('["success"]')).toBeInTheDocument()
+    expect(rendered.getByText('Data: ["success"]')).toBeInTheDocument()
   })
 })