apollo-client-nextjs: registerApolloClient is not exported error

When I try to use getClient().query I get the following error:

Attempted import error: 'registerApolloClient' is not exported from '@apollo/experimental-nextjs-app-support/rsc' (imported as 'registerApolloClient').

Any thoughts on what could cause this issue?

The full call i’m using:

const { data } = await getClient().query({
  query: loginMutation,
  variables: {
    loginInput: {
      email: credentials.email,
      password: credentials.password,
    },
  },
});

Next: 14.1.3 @apollo/client: 3.9.11 @apollo/experimental-nextjs-app-support: 0.10.0

About this issue

Original URL
State: closed
Created 3 months ago
Reactions: 1
Comments: 16 (5 by maintainers)

Most upvoted comments

Yeah, unfortunately Next.js has about 6 different scenarios in which your JavaScript code can run.

With makeClient I mean that you just create a function that creates an ApolloClient instance of your, not the prop passed into ApolloNextAppProvider.

You shouldn’t be using NextSSRInMemoryCache or NextSSRApolloClient outside of Client Components. (React Components in files with "use client" or imported by such files).

Generally, your route handler has nothing to do with React at all (Next runs it without React!), so you don’t need to pull this package into it, as this package is meant for interaction with React Server Components and React Client Components, not any non-React functionality.

phryneas on Apr 16, 2024

I have to admit that I’m still struggling a bit about what exactly @jnovak-SM2Dev wants to do here.

I’ll lay out our recommendations:

Cookies for authentication, always.
in RSC, you can easily access these cookies. registerApolloClient + getClient.
in Client Components (SSR and Browser) use ApolloWrapper and useSuspenseQuery or useBackgroundQuery. Only those two will run during SSR and transport their data over, useQuery is browser-only (will just be loading in SSR).
In SSR, you cannot access cookies directly, but you can access them in RSC and pass them as a prop to a Client Component and make them available to your ApolloWrapper that way.
You can use https://github.com/phryneas/ssr-only-secrets to ensure that these props do not leak any secrets into Browser JavaScript.
The example by Patrick over here shows this setup.
In the Browser, you just use normal cookies again.

I do not know how auth.js plays into all of that, as I’m not familiar with them.

Generally, apart from the Cookies/Auth part, you’d just write your code like you always would with the modern useSuspenseQuery/useBackgroundQuery hooks and this library takes care about any SSR data transport for you automatically.

phryneas on Apr 16, 2024