Using Apollo Effectively with Next 13 Server Side Components

November 27, 2022 · ⏱️ 3 min read

Before you start reading

The bright minds at Apollo have dropped a ground-breaking new library - '@apollo/experimental-nextjs-app-support'. This toolkit is geared to supercharge your integration of Apollo Client with Next.js 13, all but eclipsing my well-worn, yet admittedly more cumbersome approach. So, before diving in, consider checking out their official blog post to get the scoop on this exciting development.

TL;DR

You can find the repository for the subject discussed in this post here.

What's new with Next 13?

Next 13 has been released with amazing new features very recently and one of those new features was the changes on rendering fundamentals. To put it in short, Next 13 completely changed how static-site generation and server-side rendering works by introducing Nested Layouts and React Server Components.

Since this new release is still experimental and in its early stages, there aren't many documentation around how to use it with existing stacks such as Apollo, tRPC, etc. which were really common to be used with Next.js before.

Spotting the problem

I'm one of those people who can't resist to play with this new amazing tools so I went ahead and created a Next 13 project with Apollo Client to use the Rick and Morty GraphQL API, so that I don't have to worry about creating an API.

Using SSR wit Apollo and Next.js is not a new thing, actually Next.js has a repo on how to use it here and that's what I used when initially set up my project. But not too long after, I realized that Apollo Client's SSR mode is not capturing all of my queries in the component tree and only capturing quries that's used in the rendered part of the specific layout. I suspected that this may be about the new Nested Layout feature.

Diving into the details and the journey to the solution

Even though the current SSR solution was working, it wasn't the optimal solution since some of my queries like fetching the authenticated user were not being cached. While looking for solutions to my problem, I stumbled upon a repo that is a starter template for using Next 13 with tRPC. This repository was using asyncStorage, a new feature in NodeJS version 14, to enable the usage of tRPC with React Server-Side components and preserving the state in client-side components.

Next.js 13 also had an implementation for asyncStorage, which is how they store stuff like headers and cookies specific to each request. I thought this was the perfect solution for preserving the Apollo Client per request and restoring it in the client by passing the state of Apollo client at the ond of the rendering phase.

I was using the SSR enabled implementation of Apollo with Next.js here so I changed some parts of it to persist the apollo cache to asyncStorage on the server-side rendering phase and pass to that cache to the ApolloProvider on client side rendering phase. Here's how I changed the apolloCLient:

You can find the whole implementation of the app with examples on how to use Apollo Client on different components in this repository.