fix: solid-query-devtools and panel query client (#9763)

* fixed solid-query-devtools and panel

* Added changeset

* Fixed typo

Author: CapitaineToinon

.changeset/breezy-cobras-sniff.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/solid-query-devtools': patch
+---
+
+Fixed client prop not working on SolidQueryDevtools and SolidQueryDevtoolsPanel

packages/solid-query-devtools/package.json

@@ -28,6 +28,8 @@
     "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js --build",
     "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --build",
     "test:build": "publint --strict && attw --pack",
+    "test:lib": "vitest --retry=3",
+    "test:lib:dev": "pnpm run test:lib --watch",
     "build": "tsup --tsconfig tsconfig.prod.json",
     "build:dev": "tsup --watch"
   },
@@ -64,6 +66,7 @@
     "@tanstack/query-devtools": "workspace:*"
   },
   "devDependencies": {
+    "@solidjs/testing-library": "^0.8.10",
     "@tanstack/solid-query": "workspace:*",
     "npm-run-all2": "^5.0.0",
     "solid-js": "^1.9.7",

packages/solid-query-devtools/src/__tests__/devtools.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@solidjs/testing-library'
+import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+import SolidQueryDevtools from '../devtools'
+
+describe('SolidQueryDevtools', () => {
+  it('should throw an error if no query client has been set', () => {
+    expect(() => render(() => <SolidQueryDevtools />)).toThrow(
+      'No QueryClient set, use QueryClientProvider to set one',
+    )
+  })
+
+  it('should not throw an error if query client is provided via context', () => {
+    const queryClient = new QueryClient()
+
+    expect(() =>
+      render(() => (
+        <QueryClientProvider client={queryClient}>
+          <SolidQueryDevtools />
+        </QueryClientProvider>
+      )),
+    ).not.toThrow()
+  })
+
+  it('should not throw an error if query client is provided via props', () => {
+    const queryClient = new QueryClient()
+
+    expect(() =>
+      render(() => <SolidQueryDevtools client={queryClient} />),
+    ).not.toThrow()
+  })
+})

packages/solid-query-devtools/src/__tests__/devtoolsPanel.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@solidjs/testing-library'
+import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+import SolidQueryDevtoolsPanel from '../devtoolsPanel'
+
+describe('SolidQueryDevtoolsPanel', () => {
+  it('should throw an error if no query client has been set', () => {
+    expect(() => render(() => <SolidQueryDevtoolsPanel />)).toThrow(
+      'No QueryClient set, use QueryClientProvider to set one',
+    )
+  })
+
+  it('should not throw an error if query client is provided via context', () => {
+    const queryClient = new QueryClient()
+
+    expect(() =>
+      render(() => (
+        <QueryClientProvider client={queryClient}>
+          <SolidQueryDevtoolsPanel />
+        </QueryClientProvider>
+      )),
+    ).not.toThrow()
+  })
+
+  it('should not throw an error if query client is provided via props', () => {
+    const queryClient = new QueryClient()
+
+    expect(() =>
+      render(() => <SolidQueryDevtoolsPanel client={queryClient} />),
+    ).not.toThrow()
+  })
+})

packages/solid-query-devtools/src/devtools.tsx

@@ -48,8 +48,8 @@ interface DevtoolsOptions {
 }
 
 export default function SolidQueryDevtools(props: DevtoolsOptions) {
-  const queryClient = useQueryClient()
-  const client = createMemo(() => props.client || queryClient)
+  const queryClient = useQueryClient(props.client)
+  const client = createMemo(() => queryClient)
   let ref!: HTMLDivElement
   const devtools = new TanstackQueryDevtools({
     client: client(),

packages/solid-query-devtools/src/devtoolsPanel.tsx

@@ -42,8 +42,8 @@ export interface DevtoolsPanelOptions {
 }
 
 export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
-  const queryClient = useQueryClient()
-  const client = createMemo(() => props.client || queryClient)
+  const queryClient = useQueryClient(props.client)
+  const client = createMemo(() => queryClient)
   let ref!: HTMLDivElement
   const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props
   const devtools = new TanstackQueryDevtoolsPanel({

packages/solid-query-devtools/test-setup.ts

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@solidjs/testing-library'
+import { afterEach } from 'vitest'
+
+// https://github.com/solidjs/solid-testing-library
+afterEach(() => cleanup())

packages/solid-query-devtools/vite.config.ts

@@ -1,6 +1,8 @@
 import { defineConfig } from 'vite'
 import solid from 'vite-plugin-solid'
 
+import packageJson from './package.json'
+
 export default defineConfig({
   plugins: [solid()],
   // fix from https://github.com/vitest-dev/vitest/issues/6992#issuecomment-2509408660
@@ -14,4 +16,14 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    name: packageJson.name,
+    dir: './src',
+    watch: false,
+    environment: 'jsdom',
+    setupFiles: ['test-setup.ts'],
+    coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },
+    typecheck: { enabled: true },
+    restoreMocks: true,
+  },
 })