Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5b6765a
fix(solid-query): client() doesn't return undefined
gopnik5 Apr 10, 2025
d51a9dc
Merge branch 'TanStack:main' into main
gopnik5 Apr 14, 2025
04ac1dd
test(solid-query): correctly manage dependent queries
gopnik5 Apr 14, 2025
49addbc
merged with latest
gopnik5 Apr 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/solid-query/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
77 changes: 77 additions & 0 deletions packages/solid-query/src/__tests__/useQuery.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { describe, expect, expectTypeOf, it, vi } from 'vitest'
import {
ErrorBoundary,
Match,
Suspense,
Switch,
createEffect,
createMemo,
Expand All @@ -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,
Expand Down Expand Up @@ -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()
})
})
})
6 changes: 5 additions & 1 deletion packages/solid-query/src/useBaseQuery.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,11 @@ export function useBaseQuery<
) {
type ResourceData = QueryObserverResult<TData, TError>

const client = createMemo(() => useQueryClient(queryClient?.()))
const client = createMemo(
() => useQueryClient(queryClient?.()),
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maintainability Issue: The createMemo function in useBaseQuery.ts has been modified to provide an initial value, which is a good practice for maintainability.

This change improves code predictability by ensuring the client memo always has a valid initial value rather than potentially being undefined on first access. This makes the component behavior more consistent and reduces the risk of unexpected errors.

For even better maintainability, consider adding a brief comment explaining why the initial value is important:

// Provide initial value to ensure client is never undefined during first render
const client = createMemo(
  () => useQueryClient(queryClient?.()),
  useQueryClient(queryClient?.())
)

useQueryClient(queryClient?.()),
)
Comment on lines +119 to +122
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fixed client initialization by providing initial value to createMemo.

This change ensures that the query client is properly initialized with an initial value, resolving the issue where client() doesn't return undefined as expected.

The second parameter to createMemo provides an immediate value that will be used before the first execution of the memo function, ensuring the client is available immediately.


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
Expand Down
71 changes: 37 additions & 34 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading