From 0e9d5b565276f0de2a1a14ffbb079b5988581c27 Mon Sep 17 00:00:00 2001 From: Damian Osipiuk Date: Fri, 21 Nov 2025 11:45:27 +0100 Subject: [PATCH 01/10] feat(devtools): allow passing a theme via prop (#9887) --- .changeset/olive-ducks-move.md | 8 ++++++++ .../query-devtools/src/DevtoolsComponent.tsx | 8 ++++---- .../src/DevtoolsPanelComponent.tsx | 8 ++++---- .../src/TanstackQueryDevtools.tsx | 12 +++++++++++ .../src/TanstackQueryDevtoolsPanel.tsx | 12 +++++++++++ .../src/contexts/QueryDevtoolsContext.ts | 2 ++ packages/query-devtools/src/index.ts | 1 + .../src/ReactQueryDevtools.tsx | 12 +++++++++++ .../src/ReactQueryDevtoolsPanel.tsx | 20 +++++++++++++++++-- .../solid-query-devtools/src/devtools.tsx | 11 ++++++++++ .../src/devtoolsPanel.tsx | 12 ++++++++++- packages/vue-query-devtools/src/devtools.vue | 2 ++ .../vue-query-devtools/src/devtoolsPanel.vue | 2 ++ packages/vue-query-devtools/src/types.ts | 11 ++++++++++ 14 files changed, 110 insertions(+), 11 deletions(-) create mode 100644 .changeset/olive-ducks-move.md diff --git a/.changeset/olive-ducks-move.md b/.changeset/olive-ducks-move.md new file mode 100644 index 0000000000..272a602f90 --- /dev/null +++ b/.changeset/olive-ducks-move.md @@ -0,0 +1,8 @@ +--- +'@tanstack/react-query-devtools': minor +'@tanstack/solid-query-devtools': minor +'@tanstack/vue-query-devtools': minor +'@tanstack/query-devtools': minor +--- + +feat(devtools): allow passing a theme via prop diff --git a/packages/query-devtools/src/DevtoolsComponent.tsx b/packages/query-devtools/src/DevtoolsComponent.tsx index 45d93204e0..069d79c87a 100644 --- a/packages/query-devtools/src/DevtoolsComponent.tsx +++ b/packages/query-devtools/src/DevtoolsComponent.tsx @@ -4,6 +4,7 @@ import { Devtools } from './Devtools' import { getPreferredColorScheme } from './utils' import { THEME_PREFERENCE } from './constants' import { PiPProvider, QueryDevtoolsContext, ThemeContext } from './contexts' +import type { Theme } from './contexts' import type { DevtoolsComponentType } from './Devtools' const DevtoolsComponent: DevtoolsComponentType = (props) => { @@ -14,10 +15,9 @@ const DevtoolsComponent: DevtoolsComponentType = (props) => { const colorScheme = getPreferredColorScheme() const theme = createMemo(() => { - const preference = (localStore.theme_preference || THEME_PREFERENCE) as - | 'system' - | 'dark' - | 'light' + const preference = (props.theme || + localStore.theme_preference || + THEME_PREFERENCE) as Theme if (preference !== 'system') return preference return colorScheme() }) diff --git a/packages/query-devtools/src/DevtoolsPanelComponent.tsx b/packages/query-devtools/src/DevtoolsPanelComponent.tsx index eb3d19e4d9..cae641b44a 100644 --- a/packages/query-devtools/src/DevtoolsPanelComponent.tsx +++ b/packages/query-devtools/src/DevtoolsPanelComponent.tsx @@ -4,6 +4,7 @@ import { ContentView, ParentPanel } from './Devtools' import { getPreferredColorScheme } from './utils' import { THEME_PREFERENCE } from './constants' import { PiPProvider, QueryDevtoolsContext, ThemeContext } from './contexts' +import type { Theme } from './contexts' import type { DevtoolsComponentType } from './Devtools' const DevtoolsPanelComponent: DevtoolsComponentType = (props) => { @@ -14,10 +15,9 @@ const DevtoolsPanelComponent: DevtoolsComponentType = (props) => { const colorScheme = getPreferredColorScheme() const theme = createMemo(() => { - const preference = (localStore.theme_preference || THEME_PREFERENCE) as - | 'system' - | 'dark' - | 'light' + const preference = (props.theme || + localStore.theme_preference || + THEME_PREFERENCE) as Theme if (preference !== 'system') return preference return colorScheme() }) diff --git a/packages/query-devtools/src/TanstackQueryDevtools.tsx b/packages/query-devtools/src/TanstackQueryDevtools.tsx index 2fee7ac00a..f8928d5d47 100644 --- a/packages/query-devtools/src/TanstackQueryDevtools.tsx +++ b/packages/query-devtools/src/TanstackQueryDevtools.tsx @@ -11,6 +11,7 @@ import type { DevtoolsErrorType, DevtoolsPosition, QueryDevtoolsProps, + Theme, } from './contexts' import type { Signal } from 'solid-js' @@ -33,6 +34,7 @@ class TanstackQueryDevtools { #errorTypes: Signal | undefined> #hideDisabledQueries: Signal #Component: DevtoolsComponentType | undefined + #theme: Signal #dispose?: () => void constructor(config: TanstackQueryDevtoolsConfig) { @@ -48,6 +50,7 @@ class TanstackQueryDevtools { styleNonce, shadowDOMTarget, hideDisabledQueries, + theme, } = config this.#client = createSignal(client) this.#queryFlavor = queryFlavor @@ -60,6 +63,7 @@ class TanstackQueryDevtools { this.#initialIsOpen = createSignal(initialIsOpen) this.#errorTypes = createSignal(errorTypes) this.#hideDisabledQueries = createSignal(hideDisabledQueries) + this.#theme = createSignal(theme) } setButtonPosition(position: DevtoolsButtonPosition) { @@ -82,6 +86,10 @@ class TanstackQueryDevtools { this.#client[1](client) } + setTheme(theme?: Theme) { + this.#theme[1](theme) + } + mount(el: T) { if (this.#isMounted) { throw new Error('Devtools is already mounted') @@ -93,6 +101,7 @@ class TanstackQueryDevtools { const [errors] = this.#errorTypes const [hideDisabledQueries] = this.#hideDisabledQueries const [queryClient] = this.#client + const [theme] = this.#theme let Devtools: DevtoolsComponentType if (this.#Component) { @@ -128,6 +137,9 @@ class TanstackQueryDevtools { get hideDisabledQueries() { return hideDisabledQueries() }, + get theme() { + return theme() + }, }} /> ) diff --git a/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx b/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx index 8b72850acd..699a64dbc1 100644 --- a/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx +++ b/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx @@ -11,6 +11,7 @@ import type { DevtoolsErrorType, DevtoolsPosition, QueryDevtoolsProps, + Theme, } from './contexts' import type { Signal } from 'solid-js' @@ -35,6 +36,7 @@ class TanstackQueryDevtoolsPanel { #hideDisabledQueries: Signal #onClose: Signal<(() => unknown) | undefined> #Component: DevtoolsComponentType | undefined + #theme: Signal #dispose?: () => void constructor(config: TanstackQueryDevtoolsPanelConfig) { @@ -51,6 +53,7 @@ class TanstackQueryDevtoolsPanel { shadowDOMTarget, onClose, hideDisabledQueries, + theme, } = config this.#client = createSignal(client) this.#queryFlavor = queryFlavor @@ -64,6 +67,7 @@ class TanstackQueryDevtoolsPanel { this.#errorTypes = createSignal(errorTypes) this.#hideDisabledQueries = createSignal(hideDisabledQueries) this.#onClose = createSignal(onClose) + this.#theme = createSignal(theme) } setButtonPosition(position: DevtoolsButtonPosition) { @@ -90,6 +94,10 @@ class TanstackQueryDevtoolsPanel { this.#onClose[1](() => onClose) } + setTheme(theme?: Theme) { + this.#theme[1](theme) + } + mount(el: T) { if (this.#isMounted) { throw new Error('Devtools is already mounted') @@ -102,6 +110,7 @@ class TanstackQueryDevtoolsPanel { const [hideDisabledQueries] = this.#hideDisabledQueries const [queryClient] = this.#client const [onClose] = this.#onClose + const [theme] = this.#theme let Devtools: DevtoolsComponentType if (this.#Component) { @@ -140,6 +149,9 @@ class TanstackQueryDevtoolsPanel { get onClose() { return onClose() }, + get theme() { + return theme() + }, }} /> ) diff --git a/packages/query-devtools/src/contexts/QueryDevtoolsContext.ts b/packages/query-devtools/src/contexts/QueryDevtoolsContext.ts index 51b44b3bae..77969931cb 100644 --- a/packages/query-devtools/src/contexts/QueryDevtoolsContext.ts +++ b/packages/query-devtools/src/contexts/QueryDevtoolsContext.ts @@ -5,6 +5,7 @@ type XPosition = 'left' | 'right' type YPosition = 'top' | 'bottom' export type DevtoolsPosition = XPosition | YPosition export type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative' +export type Theme = 'dark' | 'light' | 'system' export interface DevtoolsErrorType { /** @@ -30,6 +31,7 @@ export interface QueryDevtoolsProps { shadowDOMTarget?: ShadowRoot onClose?: () => unknown hideDisabledQueries?: boolean + theme?: Theme } export const QueryDevtoolsContext = createContext({ diff --git a/packages/query-devtools/src/index.ts b/packages/query-devtools/src/index.ts index 1cf3cedd17..4a163cb2d3 100644 --- a/packages/query-devtools/src/index.ts +++ b/packages/query-devtools/src/index.ts @@ -2,6 +2,7 @@ export type { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, + Theme, } from './contexts' export { TanstackQueryDevtools, diff --git a/packages/react-query-devtools/src/ReactQueryDevtools.tsx b/packages/react-query-devtools/src/ReactQueryDevtools.tsx index 7c6ebcd25e..959d5a739b 100644 --- a/packages/react-query-devtools/src/ReactQueryDevtools.tsx +++ b/packages/react-query-devtools/src/ReactQueryDevtools.tsx @@ -6,6 +6,7 @@ import type { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, + Theme, } from '@tanstack/query-devtools' import type { QueryClient } from '@tanstack/react-query' @@ -46,6 +47,11 @@ export interface DevtoolsOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean + /** + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. + */ + theme?: Theme } export function ReactQueryDevtools( @@ -61,6 +67,7 @@ export function ReactQueryDevtools( styleNonce, shadowDOMTarget, hideDisabledQueries, + theme, } = props const [devtools] = React.useState( new TanstackQueryDevtools({ @@ -75,6 +82,7 @@ export function ReactQueryDevtools( styleNonce, shadowDOMTarget, hideDisabledQueries, + theme, }), ) @@ -102,6 +110,10 @@ export function ReactQueryDevtools( devtools.setErrorTypes(errorTypes || []) }, [errorTypes, devtools]) + React.useEffect(() => { + devtools.setTheme(theme) + }, [theme, devtools]) + React.useEffect(() => { if (ref.current) { devtools.mount(ref.current) diff --git a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx index d1db23537f..8ff179ea3d 100644 --- a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx +++ b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { onlineManager, useQueryClient } from '@tanstack/react-query' import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools' -import type { DevtoolsErrorType } from '@tanstack/query-devtools' +import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools' import type { QueryClient } from '@tanstack/react-query' export interface DevtoolsPanelOptions { @@ -39,6 +39,11 @@ export interface DevtoolsPanelOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean + /** + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. + */ + theme?: Theme } export function ReactQueryDevtoolsPanel( @@ -46,7 +51,13 @@ export function ReactQueryDevtoolsPanel( ): React.ReactElement | null { const queryClient = useQueryClient(props.client) const ref = React.useRef(null) - const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props + const { + errorTypes, + styleNonce, + shadowDOMTarget, + hideDisabledQueries, + theme, + } = props const [devtools] = React.useState( new TanstackQueryDevtoolsPanel({ client: queryClient, @@ -61,6 +72,7 @@ export function ReactQueryDevtoolsPanel( shadowDOMTarget, onClose: props.onClose, hideDisabledQueries, + theme, }), ) @@ -76,6 +88,10 @@ export function ReactQueryDevtoolsPanel( devtools.setErrorTypes(errorTypes || []) }, [errorTypes, devtools]) + React.useEffect(() => { + devtools.setTheme(theme) + }, [theme, devtools]) + React.useEffect(() => { if (ref.current) { devtools.mount(ref.current) diff --git a/packages/solid-query-devtools/src/devtools.tsx b/packages/solid-query-devtools/src/devtools.tsx index a787ce8d76..079f8bf95d 100644 --- a/packages/solid-query-devtools/src/devtools.tsx +++ b/packages/solid-query-devtools/src/devtools.tsx @@ -5,6 +5,7 @@ import type { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, + Theme, } from '@tanstack/query-devtools' import type { QueryClient } from '@tanstack/solid-query' @@ -45,6 +46,11 @@ interface DevtoolsOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean + /** + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. + */ + theme?: Theme } export default function SolidQueryDevtools(props: DevtoolsOptions) { @@ -63,6 +69,7 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) { styleNonce: props.styleNonce, shadowDOMTarget: props.shadowDOMTarget, hideDisabledQueries: props.hideDisabledQueries, + theme: props.theme, }) createEffect(() => { @@ -91,6 +98,10 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) { devtools.setErrorTypes(props.errorTypes || []) }) + createEffect(() => { + devtools.setTheme(props.theme || 'system') + }) + onMount(() => { devtools.mount(ref) onCleanup(() => devtools.unmount()) diff --git a/packages/solid-query-devtools/src/devtoolsPanel.tsx b/packages/solid-query-devtools/src/devtoolsPanel.tsx index 5ddc5319ac..1288b031e7 100644 --- a/packages/solid-query-devtools/src/devtoolsPanel.tsx +++ b/packages/solid-query-devtools/src/devtoolsPanel.tsx @@ -1,7 +1,7 @@ import { createEffect, createMemo, onCleanup, onMount } from 'solid-js' import { onlineManager, useQueryClient } from '@tanstack/solid-query' import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools' -import type { DevtoolsErrorType } from '@tanstack/query-devtools' +import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools' import type { QueryClient } from '@tanstack/solid-query' import type { JSX } from 'solid-js' @@ -39,6 +39,11 @@ export interface DevtoolsPanelOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean + /** + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. + */ + theme?: Theme } export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) { @@ -59,6 +64,7 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) { shadowDOMTarget, onClose: props.onClose, hideDisabledQueries, + theme: props.theme, }) createEffect(() => { devtools.setClient(client()) @@ -71,6 +77,10 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) { devtools.setErrorTypes(props.errorTypes || []) }) + createEffect(() => { + devtools.setTheme(props.theme || 'system') + }) + onMount(() => { devtools.mount(ref) onCleanup(() => devtools.unmount()) diff --git a/packages/vue-query-devtools/src/devtools.vue b/packages/vue-query-devtools/src/devtools.vue index b995adb56c..d4e5482f9a 100644 --- a/packages/vue-query-devtools/src/devtools.vue +++ b/packages/vue-query-devtools/src/devtools.vue @@ -20,6 +20,7 @@ const devtools = new TanstackQueryDevtools({ styleNonce: props.styleNonce, shadowDOMTarget: props.shadowDOMTarget, hideDisabledQueries: props.hideDisabledQueries, + theme: props.theme, }) watchEffect(() => { @@ -27,6 +28,7 @@ watchEffect(() => { devtools.setPosition(props.position || 'bottom') devtools.setInitialIsOpen(props.initialIsOpen) devtools.setErrorTypes(props.errorTypes || []) + devtools.setTheme(props.theme || 'system') }) onMounted(() => { diff --git a/packages/vue-query-devtools/src/devtoolsPanel.vue b/packages/vue-query-devtools/src/devtoolsPanel.vue index 189f86330b..0443831240 100644 --- a/packages/vue-query-devtools/src/devtoolsPanel.vue +++ b/packages/vue-query-devtools/src/devtoolsPanel.vue @@ -28,11 +28,13 @@ const devtools = new TanstackQueryDevtoolsPanel({ shadowDOMTarget: props.shadowDOMTarget, hideDisabledQueries: props.hideDisabledQueries, onClose: props.onClose, + theme: props.theme, }) watchEffect(() => { devtools.setOnClose(props.onClose ?? (() => {})) devtools.setErrorTypes(props.errorTypes || []) + devtools.setTheme(props.theme) }) onMounted(() => { diff --git a/packages/vue-query-devtools/src/types.ts b/packages/vue-query-devtools/src/types.ts index 8007b06504..67dd9a2755 100644 --- a/packages/vue-query-devtools/src/types.ts +++ b/packages/vue-query-devtools/src/types.ts @@ -2,6 +2,7 @@ import type { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, + Theme, } from '@tanstack/query-devtools' import type { QueryClient } from '@tanstack/vue-query' @@ -42,6 +43,11 @@ export interface DevtoolsOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean + /** + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. + */ + theme?: Theme } export interface DevtoolsPanelOptions { @@ -78,4 +84,9 @@ export interface DevtoolsPanelOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean + /** + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. + */ + theme?: Theme } From 18febbd79abd46c5b60c3f8cb6f3086a8c8bf7d4 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 21 Nov 2025 10:46:41 +0000 Subject: [PATCH 02/10] ci: Version Packages (#9890) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/olive-ducks-move.md | 8 -------- examples/angular/auto-refetching/package.json | 2 +- examples/angular/basic-persister/package.json | 2 +- examples/angular/basic/package.json | 2 +- examples/angular/devtools-panel/package.json | 2 +- .../infinite-query-with-max-pages/package.json | 2 +- examples/angular/optimistic-updates/package.json | 2 +- examples/angular/pagination/package.json | 2 +- .../query-options-from-a-service/package.json | 2 +- examples/angular/router/package.json | 2 +- examples/angular/rxjs/package.json | 2 +- examples/angular/simple/package.json | 2 +- examples/react/algolia/package.json | 2 +- examples/react/auto-refetching/package.json | 2 +- examples/react/basic-graphql-request/package.json | 2 +- examples/react/basic/package.json | 2 +- examples/react/chat/package.json | 2 +- examples/react/default-query-function/package.json | 2 +- examples/react/devtools-panel/package.json | 2 +- examples/react/eslint-legacy/package.json | 2 +- .../react/infinite-query-with-max-pages/package.json | 2 +- .../react/load-more-infinite-scroll/package.json | 2 +- examples/react/nextjs-app-prefetching/package.json | 2 +- .../react/nextjs-suspense-streaming/package.json | 2 +- examples/react/nextjs/package.json | 2 +- examples/react/offline/package.json | 2 +- examples/react/optimistic-updates-cache/package.json | 2 +- examples/react/optimistic-updates-ui/package.json | 2 +- examples/react/pagination/package.json | 2 +- examples/react/playground/package.json | 2 +- examples/react/prefetching/package.json | 2 +- examples/react/react-native/package.json | 2 +- examples/react/react-router/package.json | 2 +- examples/react/rick-morty/package.json | 2 +- examples/react/shadow-dom/package.json | 2 +- examples/react/simple/package.json | 2 +- examples/react/star-wars/package.json | 2 +- examples/react/suspense/package.json | 2 +- examples/solid/astro/package.json | 2 +- examples/solid/basic-graphql-request/package.json | 2 +- examples/solid/basic/package.json | 2 +- examples/solid/default-query-function/package.json | 2 +- examples/solid/simple/package.json | 2 +- examples/solid/solid-start-streaming/package.json | 2 +- examples/svelte/auto-refetching/package.json | 2 +- examples/svelte/basic/package.json | 2 +- .../svelte/load-more-infinite-scroll/package.json | 2 +- examples/svelte/optimistic-updates/package.json | 2 +- examples/svelte/playground/package.json | 2 +- examples/svelte/simple/package.json | 2 +- examples/svelte/ssr/package.json | 2 +- examples/svelte/star-wars/package.json | 2 +- examples/vue/basic/package.json | 2 +- examples/vue/simple/package.json | 2 +- integrations/angular-cli-20/package.json | 2 +- packages/angular-query-experimental/CHANGELOG.md | 2 ++ packages/angular-query-experimental/package.json | 2 +- packages/query-devtools/CHANGELOG.md | 7 +++++++ packages/query-devtools/package.json | 2 +- packages/react-query-devtools/CHANGELOG.md | 12 ++++++++++++ packages/react-query-devtools/package.json | 2 +- packages/solid-query-devtools/CHANGELOG.md | 11 +++++++++++ packages/solid-query-devtools/package.json | 2 +- packages/svelte-query-devtools/CHANGELOG.md | 7 +++++++ packages/svelte-query-devtools/package.json | 2 +- packages/vue-query-devtools/CHANGELOG.md | 11 +++++++++++ packages/vue-query-devtools/package.json | 2 +- 67 files changed, 110 insertions(+), 68 deletions(-) delete mode 100644 .changeset/olive-ducks-move.md create mode 100644 packages/query-devtools/CHANGELOG.md create mode 100644 packages/react-query-devtools/CHANGELOG.md diff --git a/.changeset/olive-ducks-move.md b/.changeset/olive-ducks-move.md deleted file mode 100644 index 272a602f90..0000000000 --- a/.changeset/olive-ducks-move.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -'@tanstack/react-query-devtools': minor -'@tanstack/solid-query-devtools': minor -'@tanstack/vue-query-devtools': minor -'@tanstack/query-devtools': minor ---- - -feat(devtools): allow passing a theme via prop diff --git a/examples/angular/auto-refetching/package.json b/examples/angular/auto-refetching/package.json index 08ceb2c6fc..7ddecc5466 100644 --- a/examples/angular/auto-refetching/package.json +++ b/examples/angular/auto-refetching/package.json @@ -13,7 +13,7 @@ "@angular/compiler": "^20.0.0", "@angular/core": "^20.0.0", "@angular/platform-browser": "^20.0.0", - "@tanstack/angular-query-experimental": "^5.90.12", + "@tanstack/angular-query-experimental": "^5.90.13", "rxjs": "^7.8.2", "tslib": "^2.8.1", "zone.js": "0.15.0" diff --git a/examples/angular/basic-persister/package.json b/examples/angular/basic-persister/package.json index cfabd53a51..90328c301c 100644 --- a/examples/angular/basic-persister/package.json +++ b/examples/angular/basic-persister/package.json @@ -13,7 +13,7 @@ "@angular/compiler": "^20.0.0", "@angular/core": "^20.0.0", "@angular/platform-browser": "^20.0.0", - "@tanstack/angular-query-experimental": "^5.90.12", + "@tanstack/angular-query-experimental": "^5.90.13", "@tanstack/angular-query-persist-client": "^5.62.17", "@tanstack/query-async-storage-persister": "^5.90.12", "rxjs": "^7.8.2", diff --git a/examples/angular/basic/package.json b/examples/angular/basic/package.json index f4bdfb03d6..3dbc53e3f1 100644 --- a/examples/angular/basic/package.json +++ b/examples/angular/basic/package.json @@ -13,7 +13,7 @@ "@angular/compiler": "^20.0.0", "@angular/core": "^20.0.0", "@angular/platform-browser": "^20.0.0", - "@tanstack/angular-query-experimental": "^5.90.12", + "@tanstack/angular-query-experimental": "^5.90.13", "rxjs": "^7.8.2", "tslib": "^2.8.1", "zone.js": "0.15.0" diff --git a/examples/angular/devtools-panel/package.json b/examples/angular/devtools-panel/package.json index 34aeb64428..b34d07c8fa 100644 --- a/examples/angular/devtools-panel/package.json +++ b/examples/angular/devtools-panel/package.json @@ -14,7 +14,7 @@ "@angular/core": "^20.0.0", "@angular/platform-browser": "^20.0.0", "@angular/router": "^20.0.0", - "@tanstack/angular-query-experimental": "^5.90.12", + "@tanstack/angular-query-experimental": "^5.90.13", "rxjs": "^7.8.2", "tslib": "^2.8.1", "zone.js": "0.15.0" diff --git a/examples/angular/infinite-query-with-max-pages/package.json b/examples/angular/infinite-query-with-max-pages/package.json index 33200076de..6c004918cf 100644 --- a/examples/angular/infinite-query-with-max-pages/package.json +++ b/examples/angular/infinite-query-with-max-pages/package.json @@ -13,7 +13,7 @@ "@angular/compiler": "^20.0.0", "@angular/core": "^20.0.0", "@angular/platform-browser": "^20.0.0", - "@tanstack/angular-query-experimental": "^5.90.12", + "@tanstack/angular-query-experimental": "^5.90.13", "rxjs": "^7.8.2", "tslib": "^2.8.1", "zone.js": "0.15.0" diff --git a/examples/angular/optimistic-updates/package.json b/examples/angular/optimistic-updates/package.json index 60e420290e..3909e8115d 100644 --- a/examples/angular/optimistic-updates/package.json +++ b/examples/angular/optimistic-updates/package.json @@ -14,7 +14,7 @@ "@angular/core": "^20.0.0", "@angular/forms": "^20.0.0", "@angular/platform-browser": "^20.0.0", - "@tanstack/angular-query-experimental": "^5.90.12", + "@tanstack/angular-query-experimental": "^5.90.13", "rxjs": "^7.8.2", "tslib": "^2.8.1", "zone.js": "0.15.0" diff --git a/examples/angular/pagination/package.json b/examples/angular/pagination/package.json index 37576f2ac1..b3540fba9b 100644 --- a/examples/angular/pagination/package.json +++ b/examples/angular/pagination/package.json @@ -13,7 +13,7 @@ "@angular/compiler": "^20.0.0", "@angular/core": "^20.0.0", "@angular/platform-browser": "^20.0.0", - "@tanstack/angular-query-experimental": "^5.90.12", + "@tanstack/angular-query-experimental": "^5.90.13", "rxjs": "^7.8.2", "tslib": "^2.8.1", "zone.js": "0.15.0" diff --git a/examples/angular/query-options-from-a-service/package.json b/examples/angular/query-options-from-a-service/package.json index 31b1e8162a..8849bd4146 100644 --- a/examples/angular/query-options-from-a-service/package.json +++ b/examples/angular/query-options-from-a-service/package.json @@ -14,7 +14,7 @@ "@angular/core": "^20.0.0", "@angular/platform-browser": "^20.0.0", "@angular/router": "^20.0.0", - "@tanstack/angular-query-experimental": "^5.90.12", + "@tanstack/angular-query-experimental": "^5.90.13", "rxjs": "^7.8.2", "tslib": "^2.8.1", "zone.js": "0.15.0" diff --git a/examples/angular/router/package.json b/examples/angular/router/package.json index 4ac3cd2275..eb596fa480 100644 --- a/examples/angular/router/package.json +++ b/examples/angular/router/package.json @@ -14,7 +14,7 @@ "@angular/core": "^20.0.0", "@angular/platform-browser": "^20.0.0", "@angular/router": "^20.0.0", - "@tanstack/angular-query-experimental": "^5.90.12", + "@tanstack/angular-query-experimental": "^5.90.13", "rxjs": "^7.8.2", "tslib": "^2.8.1", "zone.js": "0.15.0" diff --git a/examples/angular/rxjs/package.json b/examples/angular/rxjs/package.json index 43526fd725..7e5782a290 100644 --- a/examples/angular/rxjs/package.json +++ b/examples/angular/rxjs/package.json @@ -14,7 +14,7 @@ "@angular/core": "^20.0.0", "@angular/forms": "^20.0.0", "@angular/platform-browser": "^20.0.0", - "@tanstack/angular-query-experimental": "^5.90.12", + "@tanstack/angular-query-experimental": "^5.90.13", "rxjs": "^7.8.2", "tslib": "^2.8.1", "zone.js": "0.15.0" diff --git a/examples/angular/simple/package.json b/examples/angular/simple/package.json index a3f7b82082..c5573fa2fa 100644 --- a/examples/angular/simple/package.json +++ b/examples/angular/simple/package.json @@ -13,7 +13,7 @@ "@angular/compiler": "^20.0.0", "@angular/core": "^20.0.0", "@angular/platform-browser": "^20.0.0", - "@tanstack/angular-query-experimental": "^5.90.12", + "@tanstack/angular-query-experimental": "^5.90.13", "rxjs": "^7.8.2", "tslib": "^2.8.1", "zone.js": "0.15.0" diff --git a/examples/react/algolia/package.json b/examples/react/algolia/package.json index 9d03dff0e8..1d9dee10c0 100644 --- a/examples/react/algolia/package.json +++ b/examples/react/algolia/package.json @@ -10,7 +10,7 @@ "dependencies": { "@algolia/client-search": "5.2.1", "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "react": "^19.0.0", "react-dom": "^19.0.0" }, diff --git a/examples/react/auto-refetching/package.json b/examples/react/auto-refetching/package.json index bda31166ae..b2c76bfa23 100644 --- a/examples/react/auto-refetching/package.json +++ b/examples/react/auto-refetching/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "next": "^15.3.1", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/basic-graphql-request/package.json b/examples/react/basic-graphql-request/package.json index 95840c6592..1ccc3a78a0 100644 --- a/examples/react/basic-graphql-request/package.json +++ b/examples/react/basic-graphql-request/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "graphql": "^16.9.0", "graphql-request": "^7.1.2", "react": "^19.0.0", diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json index dcb443d0da..4822a1a321 100644 --- a/examples/react/basic/package.json +++ b/examples/react/basic/package.json @@ -11,7 +11,7 @@ "dependencies": { "@tanstack/query-async-storage-persister": "^5.90.12", "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "@tanstack/react-query-persist-client": "^5.90.12", "react": "^19.0.0", "react-dom": "^19.0.0" diff --git a/examples/react/chat/package.json b/examples/react/chat/package.json index ba08e435e8..0ee9396a81 100644 --- a/examples/react/chat/package.json +++ b/examples/react/chat/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "react": "^19.0.0", "react-dom": "^19.0.0" }, diff --git a/examples/react/default-query-function/package.json b/examples/react/default-query-function/package.json index 65eb9f167d..5be0910c0f 100644 --- a/examples/react/default-query-function/package.json +++ b/examples/react/default-query-function/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "react": "^19.0.0", "react-dom": "^19.0.0" }, diff --git a/examples/react/devtools-panel/package.json b/examples/react/devtools-panel/package.json index 5985f3a04e..87daa0148a 100644 --- a/examples/react/devtools-panel/package.json +++ b/examples/react/devtools-panel/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "react": "^19.0.0", "react-dom": "^19.0.0" }, diff --git a/examples/react/eslint-legacy/package.json b/examples/react/eslint-legacy/package.json index 37f32c5aa6..c2549d0020 100644 --- a/examples/react/eslint-legacy/package.json +++ b/examples/react/eslint-legacy/package.json @@ -11,7 +11,7 @@ "dependencies": { "@tanstack/query-async-storage-persister": "^5.90.12", "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "@tanstack/react-query-persist-client": "^5.90.12", "react": "^19.0.0", "react-dom": "^19.0.0" diff --git a/examples/react/infinite-query-with-max-pages/package.json b/examples/react/infinite-query-with-max-pages/package.json index 4bb1c29b3c..ee6333f073 100644 --- a/examples/react/infinite-query-with-max-pages/package.json +++ b/examples/react/infinite-query-with-max-pages/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "next": "^15.3.1", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/load-more-infinite-scroll/package.json b/examples/react/load-more-infinite-scroll/package.json index 8de600c557..630a516b19 100644 --- a/examples/react/load-more-infinite-scroll/package.json +++ b/examples/react/load-more-infinite-scroll/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "next": "^15.3.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/react/nextjs-app-prefetching/package.json b/examples/react/nextjs-app-prefetching/package.json index 3415fb60f6..e0514ce38f 100644 --- a/examples/react/nextjs-app-prefetching/package.json +++ b/examples/react/nextjs-app-prefetching/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "next": "^15.3.1", "react": "^19.0.0", "react-dom": "^19.0.0" diff --git a/examples/react/nextjs-suspense-streaming/package.json b/examples/react/nextjs-suspense-streaming/package.json index 9cc1904cb6..d86ba6d346 100644 --- a/examples/react/nextjs-suspense-streaming/package.json +++ b/examples/react/nextjs-suspense-streaming/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "@tanstack/react-query-next-experimental": "^5.91.0", "next": "^16.0.1", "react": "^19.0.0", diff --git a/examples/react/nextjs/package.json b/examples/react/nextjs/package.json index 6fe0777b61..f9a79f8d52 100644 --- a/examples/react/nextjs/package.json +++ b/examples/react/nextjs/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "next": "^15.3.1", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/offline/package.json b/examples/react/offline/package.json index b770a1cb90..c0ec459972 100644 --- a/examples/react/offline/package.json +++ b/examples/react/offline/package.json @@ -11,7 +11,7 @@ "@tanstack/query-async-storage-persister": "^5.90.12", "@tanstack/react-location": "^3.7.4", "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "@tanstack/react-query-persist-client": "^5.90.12", "msw": "^2.6.6", "react": "^19.0.0", diff --git a/examples/react/optimistic-updates-cache/package.json b/examples/react/optimistic-updates-cache/package.json index a64f081c91..01ede1eff9 100755 --- a/examples/react/optimistic-updates-cache/package.json +++ b/examples/react/optimistic-updates-cache/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "next": "^15.3.1", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/optimistic-updates-ui/package.json b/examples/react/optimistic-updates-ui/package.json index 1cd33d70db..01d0f93dc0 100755 --- a/examples/react/optimistic-updates-ui/package.json +++ b/examples/react/optimistic-updates-ui/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "next": "^15.3.1", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/pagination/package.json b/examples/react/pagination/package.json index 555d32bbb7..9f14b399ae 100644 --- a/examples/react/pagination/package.json +++ b/examples/react/pagination/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "next": "^15.3.1", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/playground/package.json b/examples/react/playground/package.json index c4368db41b..a23c76fd66 100644 --- a/examples/react/playground/package.json +++ b/examples/react/playground/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "react": "^19.0.0", "react-dom": "^19.0.0" }, diff --git a/examples/react/prefetching/package.json b/examples/react/prefetching/package.json index 48ba7352db..a9cfc3be7b 100644 --- a/examples/react/prefetching/package.json +++ b/examples/react/prefetching/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "next": "^15.3.1", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/react-native/package.json b/examples/react/react-native/package.json index d67351714d..e44614a5c1 100644 --- a/examples/react/react-native/package.json +++ b/examples/react/react-native/package.json @@ -15,7 +15,7 @@ "@react-navigation/native": "^6.1.18", "@react-navigation/stack": "^6.4.1", "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "expo": "^52.0.11", "expo-constants": "^17.0.3", "expo-status-bar": "^2.0.0", diff --git a/examples/react/react-router/package.json b/examples/react/react-router/package.json index 4b44b65130..1d4a3d567c 100644 --- a/examples/react/react-router/package.json +++ b/examples/react/react-router/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "localforage": "^1.10.0", "match-sorter": "^6.3.4", "react": "^19.0.0", diff --git a/examples/react/rick-morty/package.json b/examples/react/rick-morty/package.json index 5e2fe625a9..2e59310a7b 100644 --- a/examples/react/rick-morty/package.json +++ b/examples/react/rick-morty/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-router": "^6.25.1", diff --git a/examples/react/shadow-dom/package.json b/examples/react/shadow-dom/package.json index 1de1e99c13..e3dfee65a7 100644 --- a/examples/react/shadow-dom/package.json +++ b/examples/react/shadow-dom/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "react": "^19.0.0", "react-dom": "^19.0.0" }, diff --git a/examples/react/simple/package.json b/examples/react/simple/package.json index 7f144d3c0d..c3f36f35d1 100644 --- a/examples/react/simple/package.json +++ b/examples/react/simple/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "react": "^19.0.0", "react-dom": "^19.0.0" }, diff --git a/examples/react/star-wars/package.json b/examples/react/star-wars/package.json index dbf5084863..2e61e18ce8 100644 --- a/examples/react/star-wars/package.json +++ b/examples/react/star-wars/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-router": "^6.25.1", diff --git a/examples/react/suspense/package.json b/examples/react/suspense/package.json index 269cbdbe56..88bd2a25ea 100644 --- a/examples/react/suspense/package.json +++ b/examples/react/suspense/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.90.10", - "@tanstack/react-query-devtools": "^5.90.2", + "@tanstack/react-query-devtools": "^5.91.0", "font-awesome": "^4.7.0", "react": "^19.0.0", "react-dom": "^19.0.0", diff --git a/examples/solid/astro/package.json b/examples/solid/astro/package.json index e06afc754e..56b2ff28c1 100644 --- a/examples/solid/astro/package.json +++ b/examples/solid/astro/package.json @@ -16,7 +16,7 @@ "@astrojs/tailwind": "^6.0.2", "@astrojs/vercel": "^8.1.3", "@tanstack/solid-query": "^5.90.13", - "@tanstack/solid-query-devtools": "^5.90.4", + "@tanstack/solid-query-devtools": "^5.91.0", "astro": "^5.5.6", "solid-js": "^1.9.7", "tailwindcss": "^3.4.7", diff --git a/examples/solid/basic-graphql-request/package.json b/examples/solid/basic-graphql-request/package.json index d5d9509545..65093337dc 100644 --- a/examples/solid/basic-graphql-request/package.json +++ b/examples/solid/basic-graphql-request/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/solid-query": "^5.90.13", - "@tanstack/solid-query-devtools": "^5.90.4", + "@tanstack/solid-query-devtools": "^5.91.0", "graphql": "^16.9.0", "graphql-request": "^7.1.2", "solid-js": "^1.9.7" diff --git a/examples/solid/basic/package.json b/examples/solid/basic/package.json index 16ce141dc3..a4807a998a 100644 --- a/examples/solid/basic/package.json +++ b/examples/solid/basic/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/solid-query": "^5.90.13", - "@tanstack/solid-query-devtools": "^5.90.4", + "@tanstack/solid-query-devtools": "^5.91.0", "solid-js": "^1.9.7" }, "devDependencies": { diff --git a/examples/solid/default-query-function/package.json b/examples/solid/default-query-function/package.json index bdacb4254c..926516d092 100644 --- a/examples/solid/default-query-function/package.json +++ b/examples/solid/default-query-function/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/solid-query": "^5.90.13", - "@tanstack/solid-query-devtools": "^5.90.4", + "@tanstack/solid-query-devtools": "^5.91.0", "solid-js": "^1.9.7" }, "devDependencies": { diff --git a/examples/solid/simple/package.json b/examples/solid/simple/package.json index a762681554..9fdc7241be 100644 --- a/examples/solid/simple/package.json +++ b/examples/solid/simple/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/solid-query": "^5.90.13", - "@tanstack/solid-query-devtools": "^5.90.4", + "@tanstack/solid-query-devtools": "^5.91.0", "solid-js": "^1.9.7" }, "devDependencies": { diff --git a/examples/solid/solid-start-streaming/package.json b/examples/solid/solid-start-streaming/package.json index 1d6b284fdd..903de71db6 100644 --- a/examples/solid/solid-start-streaming/package.json +++ b/examples/solid/solid-start-streaming/package.json @@ -13,7 +13,7 @@ "@solidjs/router": "^0.15.3", "@solidjs/start": "^1.1.3", "@tanstack/solid-query": "^5.90.13", - "@tanstack/solid-query-devtools": "^5.90.4", + "@tanstack/solid-query-devtools": "^5.91.0", "solid-js": "^1.9.7", "vinxi": "^0.5.3" }, diff --git a/examples/svelte/auto-refetching/package.json b/examples/svelte/auto-refetching/package.json index 5368bec86a..71dbc0c10f 100644 --- a/examples/svelte/auto-refetching/package.json +++ b/examples/svelte/auto-refetching/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/svelte-query": "^6.0.8", - "@tanstack/svelte-query-devtools": "^6.0.0" + "@tanstack/svelte-query-devtools": "^6.0.1" }, "devDependencies": { "@sveltejs/adapter-auto": "^6.1.0", diff --git a/examples/svelte/basic/package.json b/examples/svelte/basic/package.json index 6b03959551..6d9c674f01 100644 --- a/examples/svelte/basic/package.json +++ b/examples/svelte/basic/package.json @@ -10,7 +10,7 @@ "dependencies": { "@tanstack/query-async-storage-persister": "^5.90.12", "@tanstack/svelte-query": "^6.0.8", - "@tanstack/svelte-query-devtools": "^6.0.0", + "@tanstack/svelte-query-devtools": "^6.0.1", "@tanstack/svelte-query-persist-client": "^6.0.10" }, "devDependencies": { diff --git a/examples/svelte/load-more-infinite-scroll/package.json b/examples/svelte/load-more-infinite-scroll/package.json index 474a92f1b6..24f18fd1fb 100644 --- a/examples/svelte/load-more-infinite-scroll/package.json +++ b/examples/svelte/load-more-infinite-scroll/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/svelte-query": "^6.0.8", - "@tanstack/svelte-query-devtools": "^6.0.0" + "@tanstack/svelte-query-devtools": "^6.0.1" }, "devDependencies": { "@sveltejs/adapter-auto": "^6.1.0", diff --git a/examples/svelte/optimistic-updates/package.json b/examples/svelte/optimistic-updates/package.json index 87aedf240a..5a3b845215 100644 --- a/examples/svelte/optimistic-updates/package.json +++ b/examples/svelte/optimistic-updates/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/svelte-query": "^6.0.8", - "@tanstack/svelte-query-devtools": "^6.0.0" + "@tanstack/svelte-query-devtools": "^6.0.1" }, "devDependencies": { "@sveltejs/adapter-auto": "^6.1.0", diff --git a/examples/svelte/playground/package.json b/examples/svelte/playground/package.json index 29076e8772..5295a0250a 100644 --- a/examples/svelte/playground/package.json +++ b/examples/svelte/playground/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/svelte-query": "^6.0.8", - "@tanstack/svelte-query-devtools": "^6.0.0" + "@tanstack/svelte-query-devtools": "^6.0.1" }, "devDependencies": { "@sveltejs/adapter-auto": "^6.1.0", diff --git a/examples/svelte/simple/package.json b/examples/svelte/simple/package.json index fa96ae7655..6e1dffb38f 100644 --- a/examples/svelte/simple/package.json +++ b/examples/svelte/simple/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/svelte-query": "^6.0.8", - "@tanstack/svelte-query-devtools": "^6.0.0" + "@tanstack/svelte-query-devtools": "^6.0.1" }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^5.1.1", diff --git a/examples/svelte/ssr/package.json b/examples/svelte/ssr/package.json index becea13969..cc1141b5b9 100644 --- a/examples/svelte/ssr/package.json +++ b/examples/svelte/ssr/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/svelte-query": "^6.0.8", - "@tanstack/svelte-query-devtools": "^6.0.0" + "@tanstack/svelte-query-devtools": "^6.0.1" }, "devDependencies": { "@sveltejs/adapter-auto": "^6.1.0", diff --git a/examples/svelte/star-wars/package.json b/examples/svelte/star-wars/package.json index d851f63154..a6810014cb 100644 --- a/examples/svelte/star-wars/package.json +++ b/examples/svelte/star-wars/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/svelte-query": "^6.0.8", - "@tanstack/svelte-query-devtools": "^6.0.0" + "@tanstack/svelte-query-devtools": "^6.0.1" }, "devDependencies": { "@sveltejs/adapter-auto": "^6.1.0", diff --git a/examples/vue/basic/package.json b/examples/vue/basic/package.json index f0e450cd61..e570f4b517 100644 --- a/examples/vue/basic/package.json +++ b/examples/vue/basic/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/vue-query": "^5.91.2", - "@tanstack/vue-query-devtools": "^6.0.0", + "@tanstack/vue-query-devtools": "^6.1.0", "vue": "^3.4.27" }, "devDependencies": { diff --git a/examples/vue/simple/package.json b/examples/vue/simple/package.json index 0b8c364ba7..be2721f1cf 100644 --- a/examples/vue/simple/package.json +++ b/examples/vue/simple/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/vue-query": "^5.91.2", - "@tanstack/vue-query-devtools": "^6.0.0", + "@tanstack/vue-query-devtools": "^6.1.0", "vue": "^3.4.27" }, "devDependencies": { diff --git a/integrations/angular-cli-20/package.json b/integrations/angular-cli-20/package.json index a1076722dc..c9461193eb 100644 --- a/integrations/angular-cli-20/package.json +++ b/integrations/angular-cli-20/package.json @@ -14,7 +14,7 @@ "@angular/forms": "^20.0.0", "@angular/platform-browser": "^20.0.0", "@angular/router": "^20.0.0", - "@tanstack/angular-query-experimental": "^5.90.12", + "@tanstack/angular-query-experimental": "^5.90.13", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" diff --git a/packages/angular-query-experimental/CHANGELOG.md b/packages/angular-query-experimental/CHANGELOG.md index 948c5f5332..ad91de73a2 100644 --- a/packages/angular-query-experimental/CHANGELOG.md +++ b/packages/angular-query-experimental/CHANGELOG.md @@ -1,5 +1,7 @@ # @tanstack/angular-query-experimental +## 5.90.13 + ## 5.90.12 ### Patch Changes diff --git a/packages/angular-query-experimental/package.json b/packages/angular-query-experimental/package.json index 02e8f8a7b4..a97df2eeea 100644 --- a/packages/angular-query-experimental/package.json +++ b/packages/angular-query-experimental/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/angular-query-experimental", - "version": "5.90.12", + "version": "5.90.13", "description": "Signals for managing, caching and syncing asynchronous and remote data in Angular", "author": "Arnoud de Vries", "license": "MIT", diff --git a/packages/query-devtools/CHANGELOG.md b/packages/query-devtools/CHANGELOG.md new file mode 100644 index 0000000000..6ec888007b --- /dev/null +++ b/packages/query-devtools/CHANGELOG.md @@ -0,0 +1,7 @@ +# @tanstack/query-devtools + +## 5.91.0 + +### Minor Changes + +- feat(devtools): allow passing a theme via prop ([#9887](https://github.com/TanStack/query/pull/9887)) diff --git a/packages/query-devtools/package.json b/packages/query-devtools/package.json index 0509084fbe..0c4589d3a5 100644 --- a/packages/query-devtools/package.json +++ b/packages/query-devtools/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/query-devtools", - "version": "5.90.1", + "version": "5.91.0", "description": "Developer tools to interact with and visualize the TanStack Query cache", "author": "tannerlinsley", "license": "MIT", diff --git a/packages/react-query-devtools/CHANGELOG.md b/packages/react-query-devtools/CHANGELOG.md new file mode 100644 index 0000000000..e94f837f4d --- /dev/null +++ b/packages/react-query-devtools/CHANGELOG.md @@ -0,0 +1,12 @@ +# @tanstack/react-query-devtools + +## 5.91.0 + +### Minor Changes + +- feat(devtools): allow passing a theme via prop ([#9887](https://github.com/TanStack/query/pull/9887)) + +### Patch Changes + +- Updated dependencies [[`0e9d5b5`](https://github.com/TanStack/query/commit/0e9d5b565276f0de2a1a14ffbb079b5988581c27)]: + - @tanstack/query-devtools@5.91.0 diff --git a/packages/react-query-devtools/package.json b/packages/react-query-devtools/package.json index 51f701c3a7..7863db9302 100644 --- a/packages/react-query-devtools/package.json +++ b/packages/react-query-devtools/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/react-query-devtools", - "version": "5.90.2", + "version": "5.91.0", "description": "Developer tools to interact with and visualize the TanStack/react-query cache", "author": "tannerlinsley", "license": "MIT", diff --git a/packages/solid-query-devtools/CHANGELOG.md b/packages/solid-query-devtools/CHANGELOG.md index 9008385811..3f756a826e 100644 --- a/packages/solid-query-devtools/CHANGELOG.md +++ b/packages/solid-query-devtools/CHANGELOG.md @@ -1,5 +1,16 @@ # @tanstack/solid-query-devtools +## 5.91.0 + +### Minor Changes + +- feat(devtools): allow passing a theme via prop ([#9887](https://github.com/TanStack/query/pull/9887)) + +### Patch Changes + +- Updated dependencies [[`0e9d5b5`](https://github.com/TanStack/query/commit/0e9d5b565276f0de2a1a14ffbb079b5988581c27)]: + - @tanstack/query-devtools@5.91.0 + ## 5.90.4 ### Patch Changes diff --git a/packages/solid-query-devtools/package.json b/packages/solid-query-devtools/package.json index b5bf0e2755..d0742cf9b3 100644 --- a/packages/solid-query-devtools/package.json +++ b/packages/solid-query-devtools/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/solid-query-devtools", - "version": "5.90.4", + "version": "5.91.0", "description": "Developer tools to interact with and visualize the TanStack/solid-query Query cache", "author": "tannerlinsley", "license": "MIT", diff --git a/packages/svelte-query-devtools/CHANGELOG.md b/packages/svelte-query-devtools/CHANGELOG.md index 3332c9d95d..3eb08e39e6 100644 --- a/packages/svelte-query-devtools/CHANGELOG.md +++ b/packages/svelte-query-devtools/CHANGELOG.md @@ -1,5 +1,12 @@ # @tanstack/svelte-query-devtools +## 6.0.1 + +### Patch Changes + +- Updated dependencies [[`0e9d5b5`](https://github.com/TanStack/query/commit/0e9d5b565276f0de2a1a14ffbb079b5988581c27)]: + - @tanstack/query-devtools@5.91.0 + ## 6.0.0 ### Major Changes diff --git a/packages/svelte-query-devtools/package.json b/packages/svelte-query-devtools/package.json index b0b91d9c5d..415c30c81e 100644 --- a/packages/svelte-query-devtools/package.json +++ b/packages/svelte-query-devtools/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/svelte-query-devtools", - "version": "6.0.0", + "version": "6.0.1", "description": "Developer tools to interact with and visualize the TanStack/svelte-query cache", "author": "Lachlan Collins", "license": "MIT", diff --git a/packages/vue-query-devtools/CHANGELOG.md b/packages/vue-query-devtools/CHANGELOG.md index d06534bfc1..e7de3651e8 100644 --- a/packages/vue-query-devtools/CHANGELOG.md +++ b/packages/vue-query-devtools/CHANGELOG.md @@ -1,5 +1,16 @@ # @tanstack/vue-query-devtools +## 6.1.0 + +### Minor Changes + +- feat(devtools): allow passing a theme via prop ([#9887](https://github.com/TanStack/query/pull/9887)) + +### Patch Changes + +- Updated dependencies [[`0e9d5b5`](https://github.com/TanStack/query/commit/0e9d5b565276f0de2a1a14ffbb079b5988581c27)]: + - @tanstack/query-devtools@5.91.0 + ## 6.0.0 ### Patch Changes diff --git a/packages/vue-query-devtools/package.json b/packages/vue-query-devtools/package.json index 8d0da85c8e..7886cf556e 100644 --- a/packages/vue-query-devtools/package.json +++ b/packages/vue-query-devtools/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/vue-query-devtools", - "version": "6.0.0", + "version": "6.1.0", "description": "Developer tools to interact with and visualize the TanStack/vue-query cache", "author": "tannerlinsley", "license": "MIT", From ae47807851064567cf1f9604d4c84f9ee3891c36 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Sat, 22 Nov 2025 14:59:26 +0900 Subject: [PATCH 03/10] test(react-query-persist-client/PersistQueryClientProvider): switch to fake timers, replace 'await' with 'advanceTimersByTimeAsync', and use 'sleep().then()' pattern (#9859) Co-authored-by: Jonghyeon Ko --- .../PersistQueryClientProvider.test.tsx | 227 ++++++++++-------- 1 file changed, 125 insertions(+), 102 deletions(-) diff --git a/packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx b/packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx index 74bccab533..10e6948405 100644 --- a/packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx +++ b/packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx @@ -1,6 +1,6 @@ -import { describe, expect, test, vi } from 'vitest' +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' import * as React from 'react' -import { fireEvent, render, waitFor } from '@testing-library/react' +import { act, fireEvent, render } from '@testing-library/react' import { QueryClient, useQueries, useQuery } from '@tanstack/react-query' import { persistQueryClientSave } from '@tanstack/query-persist-client-core' import { queryKey, sleep } from '@tanstack/query-test-utils' @@ -22,8 +22,7 @@ const createMockPersister = (): Persister => { storedState = persistClient }, async restoreClient() { - await sleep(10) - return storedState + return sleep(10).then(() => storedState) }, removeClient() { storedState = undefined @@ -51,29 +50,36 @@ const createMockErrorPersister = ( } describe('PersistQueryClientProvider', () => { + beforeEach(() => { + vi.useFakeTimers() + }) + + afterEach(() => { + vi.useRealTimers() + }) + test('restores cache from persister', async () => { const key = queryKey() const states: Array> = [] const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createMockPersister() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() function Page() { const state = useQuery({ queryKey: key, - queryFn: async () => { - await sleep(10) - return 'fetched' - }, + queryFn: () => sleep(10).then(() => 'fetched'), }) states.push(state) @@ -95,9 +101,11 @@ describe('PersistQueryClientProvider', () => { , ) - await waitFor(() => rendered.getByText('fetchStatus: idle')) - await waitFor(() => rendered.getByText('hydrated')) - await waitFor(() => rendered.getByText('fetched')) + expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(10)) + expect(rendered.getByText('hydrated')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(11)) + expect(rendered.getByText('fetched')).toBeInTheDocument() expect(states).toHaveLength(4) @@ -130,24 +138,23 @@ describe('PersistQueryClientProvider', () => { const key = queryKey() const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createMockPersister() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() function Page() { const state = useQuery({ queryKey: key, - queryFn: async () => { - await sleep(10) - return 'fetched' - }, + queryFn: () => sleep(10).then(() => 'fetched'), }) return ( @@ -177,15 +184,19 @@ describe('PersistQueryClientProvider', () => { , ) - await waitFor(() => rendered.getByText('fetchStatus: idle')) - await waitFor(() => rendered.getByText('hydrated')) - await waitFor(() => rendered.getByText('fetched')) + expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(10)) + expect(rendered.getByText('hydrated')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(11)) + expect(rendered.getByText('fetched')).toBeInTheDocument() fireEvent.click(rendered.getByRole('button', { name: /update/i })) + await act(() => vi.advanceTimersByTimeAsync(0)) + expect(rendered.getByText('updated')).toBeInTheDocument() - await waitFor(() => rendered.getByText('updated')) - - const state = await persister.restoreClient() + const statePromise = persister.restoreClient() + await act(() => vi.advanceTimersByTimeAsync(10)) + const state = await statePromise expect(state?.clientState.queries[0]?.state.data).toBe('updated') }) @@ -195,14 +206,16 @@ describe('PersistQueryClientProvider', () => { const states: Array = [] const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createMockPersister() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() @@ -211,10 +224,7 @@ describe('PersistQueryClientProvider', () => { queries: [ { queryKey: key, - queryFn: async (): Promise => { - await sleep(10) - return 'fetched' - }, + queryFn: () => sleep(10).then(() => 'fetched'), }, ], }) @@ -238,9 +248,11 @@ describe('PersistQueryClientProvider', () => { , ) - await waitFor(() => rendered.getByText('fetchStatus: idle')) - await waitFor(() => rendered.getByText('hydrated')) - await waitFor(() => rendered.getByText('fetched')) + expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(10)) + expect(rendered.getByText('hydrated')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(11)) + expect(rendered.getByText('fetched')).toBeInTheDocument() expect(states).toHaveLength(4) @@ -274,25 +286,23 @@ describe('PersistQueryClientProvider', () => { const states: Array> = [] const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createMockPersister() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() function Page() { const state = useQuery({ queryKey: key, - queryFn: async () => { - await sleep(10) - return 'fetched' - }, - + queryFn: () => sleep(10).then(() => 'fetched'), initialData: 'initial', // make sure that initial data is older than the hydration data // otherwise initialData would be newer and takes precedence @@ -318,9 +328,11 @@ describe('PersistQueryClientProvider', () => { , ) - await waitFor(() => rendered.getByText('initial')) - await waitFor(() => rendered.getByText('hydrated')) - await waitFor(() => rendered.getByText('fetched')) + expect(rendered.getByText('initial')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(10)) + expect(rendered.getByText('hydrated')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(11)) + expect(rendered.getByText('fetched')).toBeInTheDocument() expect(states).toHaveLength(4) @@ -354,14 +366,16 @@ describe('PersistQueryClientProvider', () => { const states: Array> = [] const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createMockPersister() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() @@ -370,11 +384,11 @@ describe('PersistQueryClientProvider', () => { function Page() { const state = useQuery({ queryKey: key, - queryFn: async () => { - fetched = true - await sleep(10) - return 'fetched' - }, + queryFn: () => + sleep(10).then(() => { + fetched = true + return 'fetched' + }), staleTime: Infinity, }) @@ -398,8 +412,9 @@ describe('PersistQueryClientProvider', () => { , ) - await waitFor(() => rendered.getByText('data: null')) - await waitFor(() => rendered.getByText('data: hydrated')) + expect(rendered.getByText('data: null')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(10)) + expect(rendered.getByText('data: hydrated')).toBeInTheDocument() expect(states).toHaveLength(2) @@ -422,24 +437,23 @@ describe('PersistQueryClientProvider', () => { const key = queryKey() const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createMockPersister() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() function Page() { const state = useQuery({ queryKey: key, - queryFn: async () => { - await sleep(10) - return 'fetched' - }, + queryFn: () => sleep(10).then(() => 'fetched'), }) return ( @@ -461,25 +475,30 @@ describe('PersistQueryClientProvider', () => { , ) + expect(onSuccess).toHaveBeenCalledTimes(0) - await waitFor(() => rendered.getByText('hydrated')) + await act(() => vi.advanceTimersByTimeAsync(10)) + expect(rendered.getByText('hydrated')).toBeInTheDocument() expect(onSuccess).toHaveBeenCalledTimes(1) - await waitFor(() => rendered.getByText('fetched')) + await act(() => vi.advanceTimersByTimeAsync(11)) + expect(rendered.getByText('fetched')).toBeInTheDocument() }) test('should await onSuccess after successful restoring', async () => { const key = queryKey() const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createMockPersister() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() @@ -518,8 +537,11 @@ describe('PersistQueryClientProvider', () => { , ) - await waitFor(() => rendered.getByText('hydrated')) - await waitFor(() => rendered.getByText('fetched')) + await act(() => vi.advanceTimersByTimeAsync(30)) + expect(rendered.getByText('hydrated')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(11)) + expect(rendered.getByText('fetched')).toBeInTheDocument() + expect(states).toEqual([ 'onSuccess', 'onSuccess done', @@ -546,10 +568,7 @@ describe('PersistQueryClientProvider', () => { function Page() { const state = useQuery({ queryKey: key, - queryFn: async () => { - await sleep(10) - return 'fetched' - }, + queryFn: () => sleep(10).then(() => 'fetched'), }) return ( @@ -571,7 +590,9 @@ describe('PersistQueryClientProvider', () => { , ) - await waitFor(() => rendered.getByText('fetched')) + await act(() => vi.advanceTimersByTimeAsync(10)) + await act(() => vi.advanceTimersByTimeAsync(11)) + expect(rendered.getByText('fetched')).toBeInTheDocument() expect(removeClient).toHaveBeenCalledTimes(1) expect(onSuccess).toHaveBeenCalledTimes(0) expect(onError).toHaveBeenCalledTimes(1) @@ -587,27 +608,27 @@ describe('PersistQueryClientProvider', () => { const states: Array = [] const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createMockPersister() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() const onSuccess = vi.fn() - const queryFn1 = vi.fn().mockImplementation(async () => { - await sleep(10) - return 'queryFn1' - }) - const queryFn2 = vi.fn().mockImplementation(async () => { - await sleep(10) - return 'queryFn2' - }) + const queryFn1 = vi + .fn() + .mockImplementation(() => sleep(10).then(() => 'queryFn1')) + const queryFn2 = vi + .fn() + .mockImplementation(() => sleep(10).then(() => 'queryFn2')) function App() { const [client, setClient] = React.useState( @@ -659,8 +680,10 @@ describe('PersistQueryClientProvider', () => { const rendered = render() - await waitFor(() => rendered.getByText('hydrated')) - await waitFor(() => rendered.getByText('queryFn2')) + await act(() => vi.advanceTimersByTimeAsync(10)) + expect(rendered.getByText('hydrated')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(11)) + expect(rendered.getByText('queryFn2')).toBeInTheDocument() expect(queryFn1).toHaveBeenCalledTimes(0) expect(queryFn2).toHaveBeenCalledTimes(1) @@ -710,8 +733,7 @@ describe('PersistQueryClientProvider', () => { }, async restoreClient() { restoreCount++ - await sleep(10) - return storedState + return sleep(10).then(() => storedState) }, removeClient() { storedState = undefined @@ -722,26 +744,25 @@ describe('PersistQueryClientProvider', () => { const key = queryKey() const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createPersister() const onSuccess = vi.fn() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() function Page() { const state = useQuery({ queryKey: key, - queryFn: async () => { - await sleep(10) - return 'fetched' - }, + queryFn: () => sleep(10).then(() => 'fetched'), }) return ( @@ -764,9 +785,11 @@ describe('PersistQueryClientProvider', () => { , ) - await waitFor(() => rendered.getByText('fetchStatus: idle')) - await waitFor(() => rendered.getByText('hydrated')) - await waitFor(() => rendered.getByText('fetched')) + expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(10)) + expect(rendered.getByText('hydrated')).toBeInTheDocument() + await act(() => vi.advanceTimersByTimeAsync(11)) + expect(rendered.getByText('fetched')).toBeInTheDocument() expect(onSuccess).toHaveBeenCalledTimes(1) expect(restoreCount).toBe(1) From c9bc6002ad856e349ad15a7d07e3dac251e8c022 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Sun, 23 Nov 2025 10:55:09 +0100 Subject: [PATCH 04/10] chore: use better `Thrower` declaration in tests (#9884) Co-authored-by: Dominik Dorfmeister --- .../react-query/src/__tests__/HydrationBoundary.test.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/react-query/src/__tests__/HydrationBoundary.test.tsx b/packages/react-query/src/__tests__/HydrationBoundary.test.tsx index 06d778b2c3..8611c4c40d 100644 --- a/packages/react-query/src/__tests__/HydrationBoundary.test.tsx +++ b/packages/react-query/src/__tests__/HydrationBoundary.test.tsx @@ -211,13 +211,10 @@ describe('React hydration', () => { const newDehydratedState = dehydrate(intermediateClient) intermediateClient.clear() - function Thrower() { + function Thrower(): never { throw new Promise(() => { // Never resolve }) - - // @ts-expect-error - return null } React.startTransition(() => { From b261b6f29eee2a9bdbe1bc20035fe9b83b15376b Mon Sep 17 00:00:00 2001 From: Matthew Costabile Date: Tue, 25 Nov 2025 05:44:47 -0500 Subject: [PATCH 05/10] fix(devtools): Improve devtools accessibility by adding aria attributes, using semantic components and field labels (#9806) * update devtool a11y * changeset * ci: apply automated fixes * Update packages/query-devtools/src/Devtools.tsx * unnecessary role * label -> input * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- .changeset/slick-clubs-lay.md | 5 + packages/query-devtools/src/Devtools.tsx | 297 +++++++++++------------ packages/query-devtools/src/Explorer.tsx | 18 +- 3 files changed, 167 insertions(+), 153 deletions(-) create mode 100644 .changeset/slick-clubs-lay.md diff --git a/.changeset/slick-clubs-lay.md b/.changeset/slick-clubs-lay.md new file mode 100644 index 0000000000..aaf5fda7c4 --- /dev/null +++ b/.changeset/slick-clubs-lay.md @@ -0,0 +1,5 @@ +--- +'@tanstack/query-devtools': patch +--- + +improves accessibility of devtools diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx index 0959e1e459..5202e97781 100644 --- a/packages/query-devtools/src/Devtools.tsx +++ b/packages/query-devtools/src/Devtools.tsx @@ -1000,7 +1000,7 @@ export const ContentView: Component = (props) => { 'tsqd-action-open-pip', )} aria-label="Open in picture-in-picture mode" - title={`Open in picture-in-picture mode`} + title="Open in picture-in-picture mode" > @@ -1013,6 +1013,8 @@ export const ContentView: Component = (props) => { 'tsqd-actions-btn', 'tsqd-action-settings', )} + aria-label="Open settings menu" + title="Open settings menu" > @@ -1061,62 +1063,58 @@ export const ContentView: Component = (props) => { 'tsqd-settings-submenu', )} > - { - setDevtoolsPosition('top') - }} - as="button" - class={cx( - styles().settingsSubButton, - 'tsqd-settings-menu-position-btn', - 'tsqd-settings-menu-position-btn-top', - )} - > - Top - - - { - setDevtoolsPosition('bottom') - }} - as="button" - class={cx( - styles().settingsSubButton, - 'tsqd-settings-menu-position-btn', - 'tsqd-settings-menu-position-btn-bottom', - )} - > - Bottom - - - { - setDevtoolsPosition('left') - }} - as="button" - class={cx( - styles().settingsSubButton, - 'tsqd-settings-menu-position-btn', - 'tsqd-settings-menu-position-btn-left', - )} - > - Left - - - { - setDevtoolsPosition('right') - }} - as="button" - class={cx( - styles().settingsSubButton, - 'tsqd-settings-menu-position-btn', - 'tsqd-settings-menu-position-btn-right', - )} + + setDevtoolsPosition(value as DevtoolsPosition) + } > - Right - - + + Top + + + + Bottom + + + + Left + + + + Right + + + @@ -1146,54 +1144,47 @@ export const ContentView: Component = (props) => { 'tsqd-settings-submenu', )} > - { - props.setLocalStore('theme_preference', 'light') - }} - as="button" - class={cx( - styles().settingsSubButton, - props.localStore.theme_preference === 'light' && - styles().themeSelectedButton, - 'tsqd-settings-menu-position-btn', - 'tsqd-settings-menu-position-btn-top', - )} - > - Light - - - { - props.setLocalStore('theme_preference', 'dark') + { + props.setLocalStore('theme_preference', value) }} - as="button" - class={cx( - styles().settingsSubButton, - props.localStore.theme_preference === 'dark' && - styles().themeSelectedButton, - 'tsqd-settings-menu-position-btn', - 'tsqd-settings-menu-position-btn-bottom', - )} + aria-label="Theme preference" > - Dark - - - { - props.setLocalStore('theme_preference', 'system') - }} - as="button" - class={cx( - styles().settingsSubButton, - props.localStore.theme_preference === 'system' && - styles().themeSelectedButton, - 'tsqd-settings-menu-position-btn', - 'tsqd-settings-menu-position-btn-left', - )} - > - System - - + + Light + + + + Dark + + + + System + + + @@ -1221,51 +1212,49 @@ export const ContentView: Component = (props) => { styles().settingsMenu, 'tsqd-settings-submenu', )} + aria-label="Hide disabled queries setting" > - { - props.setLocalStore('hideDisabledQueries', 'false') - }} - as="button" - class={cx( - styles().settingsSubButton, - props.localStore.hideDisabledQueries !== 'true' && - styles().themeSelectedButton, - 'tsqd-settings-menu-position-btn', - 'tsqd-settings-menu-position-btn-show', - )} + + props.setLocalStore('hideDisabledQueries', value) + } > - Show - - - - - { - props.setLocalStore('hideDisabledQueries', 'true') - }} - as="button" - class={cx( - styles().settingsSubButton, - props.localStore.hideDisabledQueries === 'true' && - styles().themeSelectedButton, - 'tsqd-settings-menu-position-btn', - 'tsqd-settings-menu-position-btn-hide', - )} - > - Hide - Show + + + + + - - - + Hide + + + + + @@ -1961,6 +1950,9 @@ const QueryDetails = () => { styles().detailsBody, 'tsqd-query-details-summary-container', )} + role="status" + aria-live="polite" + aria-atomic="true" > 
@@ -2372,6 +2364,9 @@ const MutationDetails = () => {
             styles().detailsBody,
             'tsqd-query-details-summary-container',
           )}
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
         >
           

             
@@ -3521,15 +3516,15 @@ const stylesFactory = (
         outline-offset: 2px;
         outline: 2px solid ${colors.blue[800]};
       }
-    `,
-    themeSelectedButton: css`
-      background-color: ${t(colors.purple[100], colors.purple[900])};
-      color: ${t(colors.purple[700], colors.purple[300])};
-      & svg {
-        color: ${t(colors.purple[700], colors.purple[300])};
-      }
-      &:hover {
+      &[data-checked] {
         background-color: ${t(colors.purple[100], colors.purple[900])};
+        color: ${t(colors.purple[700], colors.purple[300])};
+        & svg {
+          color: ${t(colors.purple[700], colors.purple[300])};
+        }
+        &:hover {
+          background-color: ${t(colors.purple[100], colors.purple[900])};
+        }
       }
     `,
     viewToggle: css`
diff --git a/packages/query-devtools/src/Explorer.tsx b/packages/query-devtools/src/Explorer.tsx
index 8bf42fe4e4..3f3debcada 100644
--- a/packages/query-devtools/src/Explorer.tsx
+++ b/packages/query-devtools/src/Explorer.tsx
@@ -1,6 +1,14 @@
 import { serialize, stringify } from 'superjson'
 import { clsx as cx } from 'clsx'
-import { Index, Match, Show, Switch, createMemo, createSignal } from 'solid-js'
+import {
+  Index,
+  Match,
+  Show,
+  Switch,
+  createMemo,
+  createSignal,
+  createUniqueId,
+} from 'solid-js'
 import { Key } from '@solid-primitives/keyed'
 import * as goober from 'goober'
 import { tokens } from './theme'
@@ -325,6 +333,8 @@ export default function Explorer(props: ExplorerProps) {
 
   const currentDataPath = props.dataPath ?? []
 
+  const inputId = createUniqueId()
+
   return (
     

       
@@ -332,6 +342,7 @@ export default function Explorer(props: ExplorerProps) {