求助：在Next.js TypeScript项目中配置Apollo Client

1. 安装依赖 #

首先安装Apollo Client核心包：

yarn add @apollo/client graphql
# 若需服务端渲染（SSR）支持，可额外安装适配包
yarn add @apollo/experimental-nextjs-app-support

2. 配置Apollo Client（src/graphql/client.ts） #

在你的src/graphql/client.ts文件中，创建并导出配置好的Client实例：

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

// 替换为你的GraphQL API端点
const httpLink = createHttpLink({
  uri: 'https://your-graphql-api-endpoint.com/graphql',
});

// 可选：添加认证请求头（根据你的鉴权逻辑调整）
const authLink = setContext((_, { headers }) => {
  const token = typeof window !== 'undefined' ? localStorage.getItem('authToken') : '';
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  };
});

// 初始化Client，适配Next.js SSR/CSR场景
const client = new ApolloClient({
  ssrMode: typeof window === 'undefined',
  link: authLink.concat(httpLink),
  cache: new InMemoryCache({
    // 可选：自定义缓存策略，比如指定类型的唯一标识字段
    typePolicies: {
      Course: {
        keyFields: ['id'],
      },
    },
  }),
});

export default client;

3. 在_app.tsx中注入ApolloProvider #

修改src/pages/_app.tsx，用Provider包裹整个应用，让所有页面组件都能访问Apollo Client：

import type { AppProps } from 'next/app';
import { ApolloProvider } from '@apollo/client';
import client from '../graphql/client';
import '../styles/globals.css'; // 你的全局样式

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

4. 在页面/组件中使用Apollo Client #

以src/pages/index.tsx为例，调用你src/graphql/query.ts中定义的查询：

import { useQuery } from '@apollo/client';
import { GET_SUGGESTED_COURSES } from '../graphql/query';
import SuggestedCourses from './components/dashboard/SuggestedCourses';

export default function Home() {
  const { loading, error, data } = useQuery(GET_SUGGESTED_COURSES);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>请求出错：{error.message}</div>;

  return (
    <div>
      <h1>推荐课程</h1>
      <SuggestedCourses courses={data.suggestedCourses} />
    </div>
  );
}

额外提示 #

• 若需要SSR/SSG预获取数据，可在页面的getServerSideProps或getStaticProps中调用client.query()获取数据后传入组件
• 可配合GraphQL Codegen工具自动生成查询对应的TypeScript类型，进一步强化类型安全

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