Next.js 13无_app.tsx结构下Apollo GraphQL配置方法咨询

在 Next.js 13 的 App Router 目录结构中，_app.tsx 被根目录下的 layout.tsx 替代，你可以通过以下步骤完成 Apollo Provider 的全局配置：

1. 创建 Apollo Client 实例 #

在项目中新建一个文件（比如 lib/apollo/client.ts），编写客户端初始化代码：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

// 配置 GraphQL API 链接
const httpLink = createHttpLink({
  uri: '你的 GraphQL API 地址',
});

// 可选：添加认证逻辑
const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('auth-token');
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  };
});

// 创建客户端实例
const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

export default client;

2. 在根 Layout 中全局包裹 Apollo Provider #

打开项目根目录下的 layout.tsx，导入 Apollo Provider 和刚才创建的客户端，用它包裹所有子组件：

import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { ApolloProvider } from '@apollo/client';
import client from '@/lib/apollo/client';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: '你的应用标题',
  description: '应用描述',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body className={inter.className}>
        <ApolloProvider client={client}>
          {children}
        </ApolloProvider>
      </body>
    </html>
  );
}

说明 #

根 layout.tsx 会自动包裹所有页面和子路由的布局组件，这样整个应用内的组件都能访问到 Apollo Client 的上下文，和之前 _app.tsx 的作用完全一致。如果需要为特定路由单独配置 Apollo 客户端，也可以在对应路由目录下创建子 layout.tsx，重复上述包裹逻辑即可。

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