feat: hydration helpers [proof of concept] #877
Conversation
apps/nextjs/src/app/page.tsx
Outdated
|
|
||
| async function PostListWrapped() { | ||
| const posts = await api.post.all(); | ||
| setQueryData((t) => [t.post.all, undefined], posts); // would be cool if this was automatically put to the cache |
There was a problem hiding this comment.
this could be abstracted away by a createCaller equivalent from @trpc/react-query that would automatically set data to a query client cache, then the user would just need to put in <HydrateClient> blocks whereever they need to have live, updated data in client components
apps/nextjs/src/app/page.tsx
Outdated
| </Suspense> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| ); | ||
| } | ||
|
|
||
| async function PostListWrapped() { | ||
| const posts = await api.post.all(); |
There was a problem hiding this comment.
- Maybe the result of
api.post.all()could be branded somehow so we know the or can figure out the full query key
apps/nextjs/src/app/page.tsx
Outdated
| setQueryData((t) => [t.post.all, undefined], posts); // would be cool if this was automatically put to the cache | ||
|
|
||
| return ( | ||
| <HydrateClient> |
There was a problem hiding this comment.
- If it was
postswere branded, we could do some helper that automatically knew how to add it in the RQ cache, like
<HydrdateClient queries={[ posts ]}>
<PostList />
</HydrateClient>There was a problem hiding this comment.
Or maybe it could be something altogether automagic similar to https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#experimental-streaming-without-prefetching-in-nextjs
and we'd just have a root <Hydrate> thing in the layout that somehow had a stream of data it pushed to the cache (not sure if it's technically feasible unless we can hack RSC<->client comms to work with streams or async iterators
Closes #876