fix(devtools): change onClose callback type from () => unknown to () … (#10118)

grzdev · TkDodo · web-flow · commit 3d1a62e63bd8 · 2026-04-25T17:40:17.000+02:00
* fix(devtools): change onClose callback type from () =&gt; unknown to () =&gt; void

* Fix onClose callback type in devtools

Updated onClose callback type in devtools to improve type safety.

* chore(changeset): fixed truncated changeset description

---------

Co-authored-by: Dominik Dorfmeister &lt;office@dorfmeister.cc&gt;
diff --git a/.changeset/chatty-socks-act.md b/.changeset/chatty-socks-act.md
@@ -0,0 +1,10 @@
+---
+"@tanstack/angular-query-experimental": patch
+"@tanstack/query-devtools": patch
+"@tanstack/react-query-devtools": patch
+"@tanstack/solid-query-devtools": patch
+"@tanstack/vue-query-devtools": patch
+---
+
+fix(devtools): change onClose callback type from () => unknown to () => void
+
diff --git a/docs/framework/react/devtools.md b/docs/framework/react/devtools.md
@@ -124,7 +124,7 @@ function App() {
   - Default: `{ height: '500px' }`
   - Example: `{ height: '100%' }`
   - Example: `{ height: '100%', width: '100%' }`
-- `onClose?: () => unknown`
+- `onClose?: () => void`
   - Callback function that is called when the devtools panel is closed
 - `client?: QueryClient`,
   - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
diff --git a/docs/framework/vue/devtools.md b/docs/framework/vue/devtools.md
@@ -110,7 +110,7 @@ function toggleDevtools() {
   - Default: `{ height: '500px' }`
   - Example: `{ height: '100%' }`
   - Example: `{ height: '100%', width: '100%' }`
-- `onClose?: () => unknown`
+- `onClose?: () => void`
   - Callback function that is called when the devtools panel is closed
 - `client?: QueryClient`,
   - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
diff --git a/packages/angular-query-experimental/src/devtools-panel/types.ts b/packages/angular-query-experimental/src/devtools-panel/types.ts
@@ -42,7 +42,7 @@ export interface DevtoolsPanelOptions {
   /**
    * Callback function that is called when the devtools panel is closed
    */
-  onClose?: () => unknown
+  onClose?: () => void
 
   /**
    * Element where to render the devtools panel. When set to undefined or null, the devtools panel will not be created, or destroyed if existing.
diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
@@ -89,7 +89,7 @@ interface ContentViewProps {
   localStore: StorageObject<string>
   setLocalStore: StorageSetter<string, unknown>
   showPanelViewOnly?: boolean
-  onClose?: () => unknown
+  onClose?: () => void
 }
 
 interface QueryStatusProps {
diff --git a/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx b/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx
@@ -18,7 +18,7 @@ import type { Signal } from 'solid-js'
 export interface TanstackQueryDevtoolsPanelConfig extends QueryDevtoolsProps {
   styleNonce?: string
   shadowDOMTarget?: ShadowRoot
-  onClose?: () => unknown
+  onClose?: () => void
 }
 
 class TanstackQueryDevtoolsPanel {
diff --git a/packages/query-devtools/src/contexts/QueryDevtoolsContext.ts b/packages/query-devtools/src/contexts/QueryDevtoolsContext.ts
@@ -29,7 +29,7 @@ export interface QueryDevtoolsProps {
   initialIsOpen?: boolean
   errorTypes?: Array<DevtoolsErrorType>
   shadowDOMTarget?: ShadowRoot
-  onClose?: () => unknown
+  onClose?: () => void
   hideDisabledQueries?: boolean
   theme?: Theme
 }
diff --git a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx
@@ -34,7 +34,7 @@ export interface DevtoolsPanelOptions {
   /**
    * Callback function that is called when the devtools panel is closed
    */
-  onClose?: () => unknown
+  onClose?: () => void
   /**
    * Set this to true to hide disabled queries from the devtools panel.
    */
diff --git a/packages/solid-query-devtools/src/devtoolsPanel.tsx b/packages/solid-query-devtools/src/devtoolsPanel.tsx
@@ -34,7 +34,7 @@ export interface DevtoolsPanelOptions {
   /**
    * Callback function that is called when the devtools panel is closed
    */
-  onClose?: () => unknown
+  onClose?: () => void
   /**
    * Set this to true to hide disabled queries from the devtools panel.
    */
diff --git a/packages/vue-query-devtools/src/types.ts b/packages/vue-query-devtools/src/types.ts
@@ -79,7 +79,7 @@ export interface DevtoolsPanelOptions {
   /**
    * Callback function that is called when the devtools panel is closed
    */
-  onClose?: () => unknown
+  onClose?: () => void
   /**
    * Set this to true to hide disabled queries from the devtools panel.
    */

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ interface ContentViewProps {`
`89`	`89`	`localStore: StorageObject<string>`
`90`	`90`	`setLocalStore: StorageSetter<string, unknown>`
`91`	`91`	`showPanelViewOnly?: boolean`
`92`		`- onClose?: () => unknown`
	`92`	`+ onClose?: () => void`
`93`	`93`	`}`
`94`	`94`
`95`	`95`	`interface QueryStatusProps {`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ import type { Signal } from 'solid-js'`
`18`	`18`	`export interface TanstackQueryDevtoolsPanelConfig extends QueryDevtoolsProps {`
`19`	`19`	`styleNonce?: string`
`20`	`20`	`shadowDOMTarget?: ShadowRoot`
`21`		`- onClose?: () => unknown`
	`21`	`+ onClose?: () => void`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`class TanstackQueryDevtoolsPanel {`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export interface QueryDevtoolsProps {`
`29`	`29`	`initialIsOpen?: boolean`
`30`	`30`	`errorTypes?: Array<DevtoolsErrorType>`
`31`	`31`	`shadowDOMTarget?: ShadowRoot`
`32`		`- onClose?: () => unknown`
	`32`	`+ onClose?: () => void`
`33`	`33`	`hideDisabledQueries?: boolean`
`34`	`34`	`theme?: Theme`
`35`	`35`	`}`