Describe the bug
Suppose you have the following Post component, which uses a resource to load a user:
async function loadPost(id) {
await new Promise((resolve) => setTimeout(resolve, 10));
return {
id,
userId: 'alice',
content: 'Hello world',
};
}
export function Post(props) {
const [post] = createResource(
() => props.id,
(postId) => loadPost(postId),
);
return (
<div>
<Suspense>
<User id={post()?.userId} />
</Suspense>
<span>Post: {post()?.content}</span>
</div>
);
}
The User component in turn loads data via a resource and renders that:
async function loadUser(id) {
await new Promise((resolve) => setTimeout(resolve, 10));
return {
id,
name: `User ${id}`,
};
}
export function User(props) {
const [user] = createResource(
() => props.id,
(id) => loadUser(id),
);
return <span>User: {user()?.name}</span>;
}
If you render with renderToStringAsync, this will wait for all the resources / Suspense boundaries to resolve. But if you render this under NoHydrate like so:
await renderToStringAsync(() => (
<NoHydration>
<Post id="post123" />
</NoHydration>
));
This can result in the nested User resource returning the return value from the parent Post resource. So user() returns the same value as post() does.
This only happens with NoHydration. Removing it seems to resolve the issue.
Your Example Website or App
https://github.com/fongandrew/solidjs-resource-repro
Steps to Reproduce the Bug or Issue
- Nest components with
createResource calls and Suspense boundaries
- Render with
renderToStringAsync and <NoHydrate>
Expected behavior
I expect the accessor returned by each createResource to always return the value returned by the fetcher it was created with (or undefined if still loading). And I expect it to work with NoHydrate (the use case here is that we're just rendering a pure HTML page that will never be hydrated but still relies on a waterfall of async data loading).
Screenshots or Videos
No response
Platform
- OS: macOS
- Browser: Node
- Version: 23.5.0
Additional context
No response
Describe the bug
Suppose you have the following
Postcomponent, which uses a resource to load a user:The User component in turn loads data via a resource and renders that:
If you render with
renderToStringAsync, this will wait for all the resources / Suspense boundaries to resolve. But if you render this underNoHydratelike so:This can result in the nested
Userresource returning the return value from the parentPostresource. Souser()returns the same value aspost()does.This only happens with
NoHydration. Removing it seems to resolve the issue.Your Example Website or App
https://github.com/fongandrew/solidjs-resource-repro
Steps to Reproduce the Bug or Issue
createResourcecalls andSuspenseboundariesrenderToStringAsyncand<NoHydrate>Expected behavior
I expect the accessor returned by each
createResourceto always return the value returned by the fetcher it was created with (or undefined if still loading). And I expect it to work withNoHydrate(the use case here is that we're just rendering a pure HTML page that will never be hydrated but still relies on a waterfall of async data loading).Screenshots or Videos
No response
Platform
Additional context
No response