Open
Description
Describe the bug
Hey! First of all: thanks for you work on this great library!
While trying to run a query depending on another query in solid-query I noticed an error being thrown. The following approach seems to work at first:
function Sub() {
const parent = createQuery(() => ({
queryKey: ['parent'],
async queryFn() {
await new Promise(r => setTimeout(r, 100)); // (A)
return {
id: 123,
};
},
}));
const childQuery = createQuery(() => ({
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 (
<div>
{childQuery.data}
</div>
);
}
But as soon as the parent query is already prefetched by some other component, this component would throw a client() undefined
error (see the provided sandbox for that) (Note that changing line (A) to wait for 300 ms will resolve the error, so there seems to be a race condition)
Your minimal, reproducible example
Stackblitz
Steps to reproduce
- Go to this stackblitz example
- Click on the
Click here to cause the error
link to navigate to/sub
- See the error being captured by the ErrorBoundary
- (optional) refetch the page to see that the page does not throw when the parent query isn't already cached
- Go back to the index route
- Change the first
await new Promise(r => setTimeout(r, 100));
toawait new Promise(r => setTimeout(r, 300));
- The error isn't there anymore after navigating to
/sub
-> seems there is some race condition
Expected behavior
As a user I would expect no error to be thrown, but there is an error thrown
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- Browser: Chrome 131, Firefox 133
- solid-js: 1.9.3
- @solidjs/router: 0.15.2
Tanstack Query adapter
solid-query
TanStack Query version
v5.62.8
TypeScript version
No response
Additional context
No response
Metadata
Metadata
Assignees
Labels
No labels