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

[gopnik5]

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

[zOadT]

Thank you very much for taking a look into this @gopnik5!

I cannot make a statement about the implementation of the fix, but a test I wrote locally for the issue indeed passes now. Maybe it is useful to you as template for a regression test (in useQuery.test.tsx)

// ...
// I only managed to reproduce the issue with @solidjs/router, so I had to add it to devDependencies
import { Route, MemoryRouter, createMemoryHistory } from '@solidjs/router'

describe('useQuery', () => {
  // ...

  it('should not reproduce issue #8469', async () => {
    const queryCache = new QueryCache()
    const queryClient = new QueryClient({ 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,
          }
        },
        // refetchOnMount: false, // this would remove the error
      }))

      const childQuery = useQuery(() => ({
        queryKey: ['sub', parent.data?.id],
        // enabled: parent.data?.id != null,
        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'))

    // Navigate to the sub page to trigger the error
    history.set({
      value: '/sub',
    })

    // Wait for the error to occur
    await sleep(200)

    expect(errorHandler).not.toHaveBeenCalled()

    await waitFor(() => {
      expect(rendered.getByText('child123')).toBeInTheDocument()
    })
  })
})

[gopnik5]

Thank you! I'll take a look.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 24d451f.

---

☁️ Nx Cloud last updated this comment at 2025-04-17 09:15:11 UTC