Skip to content

v0.11.0: Prefetching in RSC, renaming exports, Next.js 15, less transported data, `@apollo/client-react-streaming/stream-utils`

Choose a tag to compare

View all tags
@phryneas phryneas released this 29 May 11:06
· 201 commits to main since this release
v.0.11.0
20c0808

Prefetching queries for Client Components in RSC

Calling registerApolloClient in RSC now also returns a PrefetchQuery component that can be used to prefetch queries in RSC to seed the Client Component cache.

Usage looks like

<PreloadQuery
  query={QUERY}
  variables={{
    foo: 1,
  }}
>
  <Suspense fallback={<>loading</>}>
    <ClientChild />
  </Suspense>
</PreloadQuery>

Client Components further down in the component tree can continue using useSuspenseQuery with the same QUERY to retrieve that data.

"use client";

import { useSuspenseQuery } from "@apollo/client";
// ...

export function ClientChild() {
  const { data } = useSuspenseQuery(QUERY);
  return <div>...</div>;
}

This also works with QueryRefs for usage with useReadQuery in Client Components.

For more details, see the new documentation at
https://github.com/apollographql/apollo-client-nextjs/tree/main?tab=readme-ov-file#preloading-data-in-rsc-for-usage-in-client-components

Renamed exports

In the past, the @apollo/experimental-nextjs-app-support package had two entry points, /rsc and /ssr.
This has caused a lot of confusion, and both entry points have been moved together into the base entry point, @apollo/experimental-nextjs-app-support.

On top of that, the Apollo Client React hooks (useQuery, useSuspenseQuery, etc.) no longer need to be imported from @apollo/experimental-nextjs-app-support, but they can be imported directly from @apollo/client now, while still being streaming-compatible.

Also, a few exports have been renamed:

  • NextSSRApolloClient -> ApolloClient
  • NextSSRInMemoryCache -> InMemoryCache
  • resetNextSSRApolloSingletons -> resetApolloClientSingletons

The old entry points with the old exports still exist and each of them has a @deprecated docblock explaining the new import to use.

Next.js 15 support

next@15-rc has been added to the peerDependencies, so this package can now be used with Next.js 15.

Thank you for the PR, @nphmuller!

Less transported data

In the past, we used the superjson package to serialize data to be transported from streaming SSR into the browser.
This package is great to allow values like undefined, circular references, and built-in class instances, like Dates.
Unfortunately, though, this adds a lot of metadata to the transported data.

Since the data we need to transport is already JSON-serializable and we only need a bit of extra handling for undefined, the SuperJSON dependency has been replaced with a more custom approach.
This considerably reduces the amount of data transported.
If you have custom non-serializable data that needs to be transported, you can provide custom stringify and revive functions.

On top of that, we now transport a minified version of the Query, which saves additional data.

@apollo/client-react-streaming/stream-utils

We have added a new entry point, @apollo/client-react-streaming/stream-utils, which exports helper functions you can use to integrate Apollo Client with custom streaming SSR setups with renderToReadableStream and renderToPipeableStream, e.g., in Vite.

We are still working on documentation for this feature, but you can already take a peek at https://deploy-preview-11807--apollo-client-docs.netlify.app/ssr-and-rsc/custom-streaming-ssr.

What's Changed

New Contributors

Full Changelog: v.0.10.1...v.0.11.0

Contributors

nphmuller and phryneas
Assets 2
Loading