From 8f45f04866e50106e4085d78a255f020d6a5d75e Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Fri, 26 Sep 2025 22:44:38 +1000 Subject: [PATCH] Sync more changes from v5 --- docs/framework/react/devtools.md | 2 +- docs/framework/solid/devtools.md | 2 +- docs/framework/svelte/devtools.md | 2 +- docs/framework/svelte/reactivity.md | 8 ++----- docs/framework/vue/devtools.md | 2 +- .../auto-refetching/src/routes/+page.svelte | 8 ++++--- .../svelte/auto-refetching/svelte.config.js | 3 --- examples/svelte/basic/svelte.config.js | 3 --- .../src/routes/+page.svelte | 2 +- .../src/routes/api/data/+server.ts | 2 +- .../optimistic-updates/svelte.config.js | 3 --- examples/svelte/playground/svelte.config.js | 1 - examples/svelte/simple/svelte.config.js | 2 -- examples/svelte/ssr/src/routes/+layout.ts | 2 +- examples/svelte/ssr/svelte.config.js | 3 --- .../svelte/star-wars/src/routes/+page.svelte | 3 +-- examples/svelte/star-wars/svelte.config.js | 1 - .../createMutation/FailureExample.svelte | 4 ++-- .../createMutation/createMutation.test.ts | 2 +- .../tests/useMutationState/BaseExample.svelte | 11 ++++----- .../useMutationState/useMutationState.test.ts | 24 +++++++++---------- 21 files changed, 35 insertions(+), 55 deletions(-) diff --git a/docs/framework/react/devtools.md b/docs/framework/react/devtools.md index 43f57680ab..b1d49d37fd 100644 --- 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 index 9034e8f6a5..97b465d672 100644 --- 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 index 0969b7d004..efdb77e922 100644 --- 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 index 8fdab9d13a..463161d304 100644 --- 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 @@ -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 index 2e2195b4d9..98d417251e 100644 --- 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 index ab5e83e17f..8873b4d922 100644 --- 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 @@ }) -

Auto Refetch with stale-time set to 1s

+

Auto Refetch with stale-time set to {intervalMs}ms

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 index 2dee2d78a1..3ddb57f8c4 100644 --- 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 index 2dee2d78a1..3ddb57f8c4 100644 --- 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 index af8738ffcc..0bbd37ee68 100644 --- 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 => 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 index c87641730c..14a33f220c 100644 --- 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 = [] /** @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 index 2dee2d78a1..3ddb57f8c4 100644 --- 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 index a52aed3a7b..3ddb57f8c4 100644 --- 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 index ec6a224d76..8abe4369b8 100644 --- 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 index 0d38c02919..5104825207 100644 --- 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 index 2dee2d78a1..3ddb57f8c4 100644 --- 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 index eaaf33aa03..939c72ec97 100644 --- a/examples/svelte/star-wars/src/routes/+page.svelte +++ b/examples/svelte/star-wars/src/routes/+page.svelte @@ -2,8 +2,7 @@

React Query Demo

Using the Star Wars API

- (Built by @Brent_m_Clark - ) + (Built by @Brent_m_Clark)

Why React Query?
diff --git a/examples/svelte/star-wars/svelte.config.js b/examples/svelte/star-wars/svelte.config.js index a52aed3a7b..3ddb57f8c4 100644 --- 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 index 7d3292d526..1ed739a622 100644 --- a/packages/svelte-query/tests/createMutation/FailureExample.svelte +++ b/packages/svelte-query/tests/createMutation/FailureExample.svelte @@ -19,5 +19,5 @@
Data: {$mutation.data?.count ?? 'undefined'}
Status: {$mutation.status}
-
Failure Count: {$mutation.failureCount ?? 'undefined'}
-
Failure Reason: {$mutation.failureReason ?? 'null'}
+
Failure Count: {$mutation.failureCount}
+
Failure Reason: {$mutation.failureReason ?? 'undefined'}
diff --git a/packages/svelte-query/tests/createMutation/createMutation.test.ts b/packages/svelte-query/tests/createMutation/createMutation.test.ts index 6fd57ed063..2335fb0da2 100644 --- 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 index 1fb28a3668..8ac3be9da3 100644 --- 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) -
- {JSON.stringify(statuses)} -
+ + - - +
+ Data: {JSON.stringify($mutationState.map((state) => state.status))} +
diff --git a/packages/svelte-query/tests/useMutationState/useMutationState.test.ts b/packages/svelte-query/tests/useMutationState/useMutationState.test.ts index 44ab27f85d..9c2910489f 100644 --- 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() }) })