NextJS (AppRouter), Apollo (Client), error on using ApolloProvider in root layout

I am trying to wrap my whole layout with Apollo so I can use graphQL in all of my page.

but it shows error whenever I tried to wrap the apolloprovider outside children component

 ⨯ node_modules\rehackt\rsc.js (36:12) @ throwNoContext
 ⨯ Error: Context is not available in this environment.
    at stringify (<anonymous>)
digest: "1025442082"
null

// apolloClient.js
    import { ApolloClient, InMemoryCache } from "@apollo/client";
    
    let apolloClient;
    
    const getApolloClient = () => {
      if (apolloClient == null){
        apolloClient = new ApolloClient({
          uri: "http://localhost:3000/api/graphql",
          cache: new InMemoryCache(),
        });
      }
      return apolloClient
    };
    
    export default getApolloClient;


// layout.js
import { ApolloProvider } from "@apollo/client";
import getApolloClient from "@/db/apolloClient";

export default async function RootLayout({ children }) {

  const session = await getServerSession();
  const apolloClient = getApolloClient();

  return (
    <html lang="en" suppressHydrationWarning={true}>
      <body className={inter.className}>
      <ApolloProvider client={apolloClient}>
         {children}
      </ApolloProvider>
      </body>
    </html>
  );
}

Solution

If you want to use Apollo Client with the App Router, you have to use it with the @apollo/experimental-nextjs-app-support library.

The App Router is based on a React Canary release that cannot be directly supported by Apollo Client, since it is missing necessary primitives - so you need the additional library.

For installation and usage instructions, please see that library's README: https://www.npmjs.com/package/@apollo/experimental-nextjs-app-support