Post

Lenz Weber-Tronic
@phry.dev

A small preview of what I'm working on right now. This is data fetched via the `<PreloadQuery` component in a React Server Component, rendered in SSR, then hydrated in the browser, and then more data comes streaming in from the RSC server due to the GraphQL `@defer` directive.

Lenz Weber-Tronic
@phry.dev

As rendering happens in a Client Component, you can just keep working with the data as it evolves in the Apollo Client's InMemoryCache over the lifetime of your application - the video shows a client-side refetch of that data.

Lenz Weber-Tronic
@phry.dev

This will not only work in React Server Components, but soon you'll be able to apply the same streaming of GraphQL multipart responses to Remix, React Router and TanStack Start loaders. If you want to follow the PR and play with the demo: github.com/apollographq...

github.comimplement multipart streaming for `PreloadQuery` by phryneas · Pull Request #389 · apollographql/apollo-client-nextjsHere&#39;s the happy case (still without @defer): https://apollo-git-6cd975-apollo-client-next-package-integration-tests.vercel.app/rsc/dynamic/PreloadQuery/queryRef-useReadQuery Here we have a sim...

2 reposts7 likes

Lenz Weber-Tronic
@phry.dev

And because I'm not sure if I brought the point over: This is **one network request** from the RSC server to the GraphQL server, and you see data streaming in piece by piece **in the browser, in a Client Component**.