@tanstack/query-devtools 5.0.0-alpha.27 → 5.0.0-alpha.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.0.0-alpha.27",
+  "version": "5.0.0-alpha.31",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -10,15 +10,17 @@
     "type": "github",
     "url": "https://github.com/sponsors/tannerlinsley"
   },
-  "types": "./build/types/index.d.ts",
-  "main": "./build/umd/index.js",
-  "module": "./build/esm/index.js",
+  "types": "build/types/index.d.ts",
+  "main": "build/umd/index.js",
+  "module": "build/esm/index.mjs",
   "exports": {
     ".": {
-      "import": "./build/esm/index.js",
+      "types": "./build/types/index.d.ts",
+      "import": "./build/esm/index.mjs",
       "require": "./build/umd/index.js",
       "default": "./build/umd/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "build",
@@ -26,7 +28,7 @@
   ],
   "devDependencies": {
     "vite-plugin-solid": "^2.5.0",
-    "@tanstack/query-core": "5.0.0-alpha.26"
+    "@tanstack/query-core": "5.0.0-alpha.31"
   },
   "dependencies": {
     "@emotion/css": "^11.10.5",
@@ -39,7 +41,7 @@
     "superjson": "^1.12.1"
   },
   "peerDependencies": {
-    "@tanstack/query-core": "5.0.0-alpha.26"
+    "@tanstack/query-core": "5.0.0-alpha.31"
   },
   "peerDependenciesMeta": {},
   "scripts": {

package/src/Devtools.tsx

@@ -1844,7 +1844,7 @@ const getStyles = () => {
       background-color: ${colors.darkGray[400]};
       font-size: ${font.size.sm};
       color: ${colors.gray[500]};
-      z-index: 2;
+      z-index: 7;
     `,
     settingsMenuHeader: css`
       padding: ${tokens.size[1.5]} ${tokens.size[2.5]};

package/src/index.tsx

@@ -17,7 +17,7 @@ export type { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType }
 export interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {}
 
 class TanstackQueryDevtools {
-  client: QueryClient
+  client: Signal<QueryClient>
   onlineManager: typeof TonlineManager
   queryFlavor: string
   version: string
@@ -39,7 +39,7 @@ class TanstackQueryDevtools {
       initialIsOpen,
       errorTypes,
     } = config
-    this.client = client
+    this.client = createSignal(client)
     this.queryFlavor = queryFlavor
     this.version = version
     this.onlineManager = onlineManager
@@ -65,6 +65,10 @@ class TanstackQueryDevtools {
     this.errorTypes[1](errorTypes)
   }
 
+  setClient(client: QueryClient) {
+    this.client[1](client)
+  }
+
   mount<T extends HTMLElement>(el: T) {
     if (this.isMounted) {
       throw new Error('Devtools is already mounted')
@@ -74,13 +78,16 @@ class TanstackQueryDevtools {
       const [pos] = this.position
       const [isOpen] = this.initialIsOpen
       const [errors] = this.errorTypes
+      const [queryClient] = this.client
       return (
         <DevtoolsComponent
-          client={this.client}
           queryFlavor={this.queryFlavor}
           version={this.version}
           onlineManager={this.onlineManager}
           {...{
+            get client() {
+              return queryClient()
+            },
             get buttonPosition() {
               return btnPosition()
             },