diff --git a/.changeset/breezy-cobras-sniff.md b/.changeset/breezy-cobras-sniff.md
new file mode 100644
index 0000000000..725008049d
--- /dev/null
+++ b/.changeset/breezy-cobras-sniff.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/solid-query-devtools': patch
+---
+
+Fixed client prop not working on SolidQueryDevtools and SolidQueryDevtoolsPanel
diff --git a/packages/solid-query-devtools/package.json b/packages/solid-query-devtools/package.json
index 30583c749a..214f52912f 100644
--- a/packages/solid-query-devtools/package.json
+++ b/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",
diff --git a/packages/solid-query-devtools/src/__tests__/devtools.test.tsx b/packages/solid-query-devtools/src/__tests__/devtools.test.tsx
new file mode 100644
index 0000000000..49d9e1210a
--- /dev/null
+++ b/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(() => )).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(() => (
+
+
+
+ )),
+ ).not.toThrow()
+ })
+
+ it('should not throw an error if query client is provided via props', () => {
+ const queryClient = new QueryClient()
+
+ expect(() =>
+ render(() => ),
+ ).not.toThrow()
+ })
+})
diff --git a/packages/solid-query-devtools/src/__tests__/devtoolsPanel.test.tsx b/packages/solid-query-devtools/src/__tests__/devtoolsPanel.test.tsx
new file mode 100644
index 0000000000..68c591beb8
--- /dev/null
+++ b/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(() => )).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(() => (
+
+
+
+ )),
+ ).not.toThrow()
+ })
+
+ it('should not throw an error if query client is provided via props', () => {
+ const queryClient = new QueryClient()
+
+ expect(() =>
+ render(() => ),
+ ).not.toThrow()
+ })
+})
diff --git a/packages/solid-query-devtools/src/devtools.tsx b/packages/solid-query-devtools/src/devtools.tsx
index d68687dd6a..a787ce8d76 100644
--- a/packages/solid-query-devtools/src/devtools.tsx
+++ b/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(),
diff --git a/packages/solid-query-devtools/src/devtoolsPanel.tsx b/packages/solid-query-devtools/src/devtoolsPanel.tsx
index 0d01310011..5ddc5319ac 100644
--- a/packages/solid-query-devtools/src/devtoolsPanel.tsx
+++ b/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({
diff --git a/packages/solid-query-devtools/test-setup.ts b/packages/solid-query-devtools/test-setup.ts
new file mode 100644
index 0000000000..c3055e4bd5
--- /dev/null
+++ b/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())
diff --git a/packages/solid-query-devtools/vite.config.ts b/packages/solid-query-devtools/vite.config.ts
index 5d3190c10f..9cb4a515e1 100644
--- a/packages/solid-query-devtools/vite.config.ts
+++ b/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,
+ },
})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index edff2397d1..757bb44244 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2618,6 +2618,9 @@ importers:
specifier: workspace:*
version: link:../query-devtools
devDependencies:
+ '@solidjs/testing-library':
+ specifier: ^0.8.10
+ version: 0.8.10(@solidjs/router@0.15.3(solid-js@1.9.7))(solid-js@1.9.7)
'@tanstack/solid-query':
specifier: workspace:*
version: link:../solid-query