NextJS(AppRouter)中使用ApolloProvider根布局报错问题

我尝试在Next.js的根布局中用ApolloProvider包裹所有页面，以便所有页面都能使用GraphQL，但将ApolloProvider包裹在children组件外时出现错误。

错误信息 #

⨯ node_modules\rehackt\rsc.js (36:12) @ throwNoContext
⨯ Error: Context is not available in this environment.
at stringify ()
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>
  );
}

解决方案 #

错误原因是Next.js App Router的根布局默认是Server Component，而ApolloProvider依赖React Context，只能在Client Component中运行。解决步骤如下：

1. 封装ApolloProvider为Client Component
   创建一个新的组件文件（比如components/apollo-provider.jsx），添加'use client'指令：

'use client';

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

export default function ApolloClientProvider({ children }) {
  const client = getApolloClient();
  return <ApolloProvider client={client}>{children}</ApolloProvider>;
}

2. 修改根布局使用封装后的组件
   更新layout.js，替换直接使用的ApolloProvider为上面封装的Client Component：

import ApolloClientProvider from "@/components/apollo-provider";
import { getServerSession } from "next-auth/next";

export default async function RootLayout({ children }) {
  const session = await getServerSession();

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

这样调整后，ApolloProvider会在客户端环境中运行，React Context就能正常工作，不会再出现环境不兼容的错误。

内容的提问来源于stack exchange，提问作者Chrisanto Sinatra