chore: upgrade to solid v2 beta 4 (#10307)

brenelz · web-flow · commit a3144571305c · 2026-03-22T00:50:19.000+01:00
diff --git a/.changeset/slimy-mice-relate.md b/.changeset/slimy-mice-relate.md
@@ -0,0 +1,7 @@
+---
+'@tanstack/solid-query-persist-client': patch
+'@tanstack/solid-query-devtools': patch
+'@tanstack/solid-query': patch
+---
+
+chore: bumps solid v2 to beta.4
diff --git a/examples/solid/astro/package.json b/examples/solid/astro/package.json
@@ -18,8 +18,8 @@
     "@tanstack/solid-query": "^6.0.0-alpha.0",
     "@tanstack/solid-query-devtools": "^6.0.0-alpha.0",
     "astro": "^5.5.6",
-    "@solidjs/web": "2.0.0-beta.2",
-    "solid-js": "2.0.0-beta.2",
+    "@solidjs/web": "2.0.0-beta.4",
+    "solid-js": "2.0.0-beta.4",
     "tailwindcss": "^3.4.7",
     "typescript": "5.8.3"
   }
diff --git a/examples/solid/basic-graphql-request/package.json b/examples/solid/basic-graphql-request/package.json
@@ -12,8 +12,8 @@
     "@tanstack/solid-query-devtools": "^6.0.0-alpha.0",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
-    "@solidjs/web": "2.0.0-beta.2",
-    "solid-js": "2.0.0-beta.2"
+    "@solidjs/web": "2.0.0-beta.4",
+    "solid-js": "2.0.0-beta.4"
   },
   "devDependencies": {
     "typescript": "5.8.3",
diff --git a/examples/solid/basic/package.json b/examples/solid/basic/package.json
@@ -10,8 +10,8 @@
   "dependencies": {
     "@tanstack/solid-query": "^6.0.0-alpha.0",
     "@tanstack/solid-query-devtools": "^6.0.0-alpha.0",
-    "@solidjs/web": "2.0.0-beta.2",
-    "solid-js": "2.0.0-beta.2"
+    "@solidjs/web": "2.0.0-beta.4",
+    "solid-js": "2.0.0-beta.4"
   },
   "devDependencies": {
     "typescript": "5.8.3",
diff --git a/examples/solid/default-query-function/package.json b/examples/solid/default-query-function/package.json
@@ -10,8 +10,8 @@
   "dependencies": {
     "@tanstack/solid-query": "^6.0.0-alpha.0",
     "@tanstack/solid-query-devtools": "^6.0.0-alpha.0",
-    "@solidjs/web": "2.0.0-beta.2",
-    "solid-js": "2.0.0-beta.2"
+    "@solidjs/web": "2.0.0-beta.4",
+    "solid-js": "2.0.0-beta.4"
   },
   "devDependencies": {
     "typescript": "5.8.3",
diff --git a/examples/solid/offline/package.json b/examples/solid/offline/package.json
@@ -13,8 +13,8 @@
     "@tanstack/solid-query-devtools": "^6.0.0-alpha.0",
     "@tanstack/solid-query-persist-client": "^6.0.0-alpha.0",
     "msw": "^2.6.6",
-    "@solidjs/web": "2.0.0-beta.2",
-    "solid-js": "2.0.0-beta.2"
+    "@solidjs/web": "2.0.0-beta.4",
+    "solid-js": "2.0.0-beta.4"
   },
   "devDependencies": {
     "typescript": "5.8.3",
diff --git a/examples/solid/simple/package.json b/examples/solid/simple/package.json
@@ -10,8 +10,8 @@
   "dependencies": {
     "@tanstack/solid-query": "^6.0.0-alpha.0",
     "@tanstack/solid-query-devtools": "^6.0.0-alpha.0",
-    "@solidjs/web": "2.0.0-beta.2",
-    "solid-js": "2.0.0-beta.2"
+    "@solidjs/web": "2.0.0-beta.4",
+    "solid-js": "2.0.0-beta.4"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.91.5",
diff --git a/examples/solid/solid-start-streaming/package.json b/examples/solid/solid-start-streaming/package.json
@@ -14,8 +14,8 @@
     "@solidjs/start": "^1.1.3",
     "@tanstack/solid-query": "^6.0.0-alpha.0",
     "@tanstack/solid-query-devtools": "^6.0.0-alpha.0",
-    "@solidjs/web": "2.0.0-beta.2",
-    "solid-js": "2.0.0-beta.2",
+    "@solidjs/web": "2.0.0-beta.4",
+    "solid-js": "2.0.0-beta.4",
     "vinxi": "^0.5.3"
   },
   "engines": {
diff --git a/integrations/solid-vite/package.json b/integrations/solid-vite/package.json
@@ -8,9 +8,9 @@
   "dependencies": {
     "@tanstack/solid-query": "workspace:*",
     "@tanstack/solid-query-devtools": "workspace:*",
-    "solid-js": "2.0.0-beta.2",
+    "solid-js": "2.0.0-beta.4",
     "vite": "^6.4.1",
     "vite-plugin-solid": "3.0.0-next.2",
-    "@solidjs/web": "2.0.0-beta.2"
+    "@solidjs/web": "2.0.0-beta.4"
   }
 }
diff --git a/packages/solid-query-devtools/package.json b/packages/solid-query-devtools/package.json
@@ -68,11 +68,11 @@
     "@babel/core": "^7.28.0",
     "@babel/preset-typescript": "^7.18.6",
     "@solidjs/testing-library": "^0.8.10",
-    "@solidjs/web": "2.0.0-beta.2",
+    "@solidjs/web": "2.0.0-beta.4",
     "@tanstack/solid-query": "workspace:*",
-    "babel-preset-solid": "2.0.0-beta.2",
+    "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"
   },
diff --git a/packages/solid-query-devtools/src/devtools.tsx b/packages/solid-query-devtools/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>
diff --git a/packages/solid-query-devtools/src/devtoolsPanel.tsx b/packages/solid-query-devtools/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 (
diff --git a/packages/solid-query-devtools/test-setup.ts b/packages/solid-query-devtools/test-setup.ts
@@ -1,6 +1,32 @@
 import '@testing-library/jest-dom/vitest'
 import { cleanup } from '@solidjs/testing-library'
-import { afterEach } from 'vitest'
+import { afterEach, vi } from 'vitest'
+
+/**
+ * @tanstack/query-devtools is written for Solid 1, where Suspense around
+ * lazy() was optional. During tests, @tanstack/custom-condition causes
+ * query-devtools source to be recompiled against Solid 2's runtime, which
+ * requires lazy() components to be inside a Loading boundary.
+ *
+ * This mock wraps lazy() so the returned component automatically renders
+ * inside a Loading boundary, bridging the Solid 1 → 2 behavioral gap.
+ */
+vi.mock('solid-js', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('solid-js')>()
+  return {
+    ...mod,
+    Suspense: mod.Loading,
+    lazy: (fn: () => Promise<{ default: any }>) => {
+      const Comp = mod.lazy(fn)
+      return (props: any) =>
+        mod.createComponent(mod.Loading, {
+          get children() {
+            return mod.createComponent(Comp, props)
+          },
+        })
+    },
+  }
+})
 
 // https://github.com/solidjs/solid-testing-library
 afterEach(() => cleanup())
diff --git a/packages/solid-query-persist-client/package.json b/packages/solid-query-persist-client/package.json
@@ -69,12 +69,12 @@
     "@babel/core": "^7.28.0",
     "@babel/preset-typescript": "^7.18.6",
     "@solidjs/testing-library": "^0.8.10",
-    "@solidjs/web": "2.0.0-beta.2",
+    "@solidjs/web": "2.0.0-beta.4",
     "@tanstack/query-test-utils": "workspace:*",
     "@tanstack/solid-query": "workspace:*",
-    "babel-preset-solid": "2.0.0-beta.2",
+    "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"
   },
diff --git a/packages/solid-query/package.json b/packages/solid-query/package.json
@@ -71,11 +71,11 @@
     "@babel/core": "^7.28.0",
     "@babel/preset-typescript": "^7.18.6",
     "@solidjs/testing-library": "^0.8.10",
-    "@solidjs/web": "2.0.0-beta.2",
+    "@solidjs/web": "2.0.0-beta.4",
     "@tanstack/query-test-utils": "workspace:*",
-    "babel-preset-solid": "2.0.0-beta.2",
+    "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"
   },
diff --git a/packages/solid-query/src/__tests__/utils.tsx b/packages/solid-query/src/__tests__/utils.tsx
@@ -1,5 +1,5 @@
 import { vi } from 'vitest'
-import { Show, createSignal, createTrackedEffect, onCleanup } from 'solid-js'
+import { Show, createSignal, createTrackedEffect } from 'solid-js'
 import { onlineManager } from '@tanstack/query-core'
 import type { ParentProps } from 'solid-js'
 import type { MockInstance } from 'vitest'
@@ -14,7 +14,7 @@ export function Blink(
   createTrackedEffect(() => {
     setShouldShow(true)
     const timeout = setActTimeout(() => setShouldShow(false), props.duration)
-    onCleanup(() => clearTimeout(timeout))
+    return () => clearTimeout(timeout)
   })
 
   return (
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -8,9 +8,9 @@`
`8`	`8`	`"dependencies": {`
`9`	`9`	`"@tanstack/solid-query": "workspace:*",`
`10`	`10`	`"@tanstack/solid-query-devtools": "workspace:*",`
`11`		`- "solid-js": "2.0.0-beta.2",`
	`11`	`+ "solid-js": "2.0.0-beta.4",`
`12`	`12`	`"vite": "^6.4.1",`
`13`	`13`	`"vite-plugin-solid": "3.0.0-next.2",`
`14`		`- "@solidjs/web": "2.0.0-beta.2"`
	`14`	`+ "@solidjs/web": "2.0.0-beta.4"`
`15`	`15`	`}`
`16`	`16`	`}`