Issue #8469 - fix(solid-query): client() doesn't return undefined

packages/solid-query/package.json

@@ -69,6 +69,7 @@
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",
+    "@solidjs/router": "^0.15.3",
     "npm-run-all2": "^5.0.0",
     "solid-js": "^1.9.5",
     "tsup-preset-solid": "^2.2.0",

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

@@ -2,6 +2,7 @@ import { describe, expect, expectTypeOf, it, vi } from 'vitest'
 import {
   ErrorBoundary,
   Match,
+  Suspense,
   Switch,
   createEffect,
   createMemo,
@@ -11,6 +12,7 @@ import {
 } from 'solid-js'
 import { fireEvent, render, waitFor } from '@solidjs/testing-library'
 import { reconcile } from 'solid-js/store'
+import { MemoryRouter, Route, createMemoryHistory } from '@solidjs/router'
 import { QueryCache, QueryClientProvider, keepPreviousData, useQuery } from '..'
 import {
   Blink,
@@ -6045,4 +6047,79 @@ describe('useQuery', () => {
 
     await waitFor(() => rendered.getByText('Status: custom client'))
   })
+
+  // See https://github.com/tannerlinsley/react-query/issues/8469
+  it('should correctly manage dependent queries', async () => {
+    const queryCache = new QueryCache()
+    const queryClient = createQueryClient({ queryCache })
+
+    const history = createMemoryHistory()
+
+    const errorHandler = vi.fn<(err: unknown) => void>()
+
+    function App() {
+      return (
+        <ErrorBoundary
+          fallback={(err) => {
+            errorHandler(err)
+            return err.message
+          }}
+        >
+          <Suspense>
+            <MemoryRouter history={history}>
+              <Route path="/" component={Index} />
+              <Route path="/sub" component={Sub} />
+            </MemoryRouter>
+          </Suspense>
+        </ErrorBoundary>
+      )
+    }
+
+    queryClient.setQueryData(['parent'], { id: 123 })
+
+    function Index() {
+      return 'Index'
+    }
+
+    function Sub() {
+      const parent = useQuery(() => ({
+        queryKey: ['parent'],
+        async queryFn() {
+          await new Promise((r) => setTimeout(r, 100))
+          return {
+            id: 123,
+          }
+        },
+      }))
+
+      const childQuery = useQuery(() => ({
+        queryKey: ['sub', parent.data?.id],
+        async queryFn() {
+          await new Promise((r) => setTimeout(r, 200))
+          return Promise.resolve('child' + parent.data?.id)
+        },
+      }))
+      return <pre>{childQuery.data}</pre>
+    }
+
+    const rendered = render(() => (
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    ))
+
+    await waitFor(() => rendered.getByText('Index'))
+
+    history.set({
+      value: '/sub',
+    })
+
+    await sleep(200)
+
+    expect(errorHandler).not.toHaveBeenCalled()
+
+    await waitFor(() => {
+      expect(rendered.getByText('child123')).toBeInTheDocument()
+    })
+  })
 })

packages/solid-query/src/useBaseQuery.ts

@@ -116,7 +116,11 @@ export function useBaseQuery<
 ) {
   type ResourceData = QueryObserverResult<TData, TError>
 
-  const client = createMemo(() => useQueryClient(queryClient?.()))
+  const client = createMemo(
+    () => useQueryClient(queryClient?.()),
+    useQueryClient(queryClient?.()),
+  )
+
   const isRestoring = useIsRestoring()
   // There are times when we run a query on the server but the resource is never read
   // This could lead to times when the queryObserver is unsubscribed before the resource has loaded