@tanstack/solid-query-devtools 6.0.0-alpha.0 → 6.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query-devtools",
-  "version": "6.0.0-alpha.0",
+  "version": "6.0.0-alpha.1",
   "description": "Developer tools to interact with and visualize the TanStack/solid-query Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -50,17 +50,17 @@
     "@babel/core": "^7.28.0",
     "@babel/preset-typescript": "^7.18.6",
     "@solidjs/testing-library": "^0.8.10",
-    "@solidjs/web": "2.0.0-beta.2",
-    "babel-preset-solid": "2.0.0-beta.2",
+    "@solidjs/web": "2.0.0-beta.4",
+    "babel-preset-solid": "2.0.0-beta.4",
     "npm-run-all2": "^5.0.0",
-    "solid-js": "2.0.0-beta.2",
+    "solid-js": "2.0.0-beta.4",
     "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "3.0.0-next.2",
-    "@tanstack/solid-query": "6.0.0-alpha.0"
+    "@tanstack/solid-query": "6.0.0-alpha.1"
   },
   "peerDependencies": {
     "solid-js": ">=2.0.0-beta.0 <3.0.0",
-    "@tanstack/solid-query": "^6.0.0-alpha.0"
+    "@tanstack/solid-query": "^6.0.0-alpha.1"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",

package/src/devtools.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, onCleanup, onSettled } from 'solid-js'
+import { createEffect, createMemo, onCleanup } from 'solid-js'
 import { onlineManager, useQueryClient } from '@tanstack/solid-query'
 import { TanstackQueryDevtools } from '@tanstack/query-devtools'
 import type {
@@ -118,9 +118,20 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
     },
   )
 
-  onSettled(() => {
+  let isMounted = false
+  let isDisposed = false
+
+  queueMicrotask(() => {
+    if (isDisposed) return
     devtools.mount(ref)
-    onCleanup(() => devtools.unmount())
+    isMounted = true
+  })
+
+  onCleanup(() => {
+    isDisposed = true
+    if (isMounted) {
+      devtools.unmount()
+    }
   })
 
   return <div class="tsqd-parent-container" ref={ref}></div>

package/src/devtoolsPanel.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, onCleanup, onSettled } from 'solid-js'
+import { createEffect, createMemo, onCleanup } from 'solid-js'
 import { onlineManager, useQueryClient } from '@tanstack/solid-query'
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
 import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
@@ -93,9 +93,20 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
     },
   )
 
-  onSettled(() => {
+  let isMounted = false
+  let isDisposed = false
+
+  queueMicrotask(() => {
+    if (isDisposed) return
     devtools.mount(ref)
-    onCleanup(() => devtools.unmount())
+    isMounted = true
+  })
+
+  onCleanup(() => {
+    isDisposed = true
+    if (isMounted) {
+      devtools.unmount()
+    }
   })
 
   return (