基于Next.js项目：如何使用Apollo Client从多个GraphQL端点获取数据？

嘿，看你已经搞定Odyssey的Apollo+GraphQL学习，还在Next.js里搭个人项目，太棒了！针对你要从两个GraphQL端点取数据的需求，我给你两种实用的方案，都能无缝适配你现有的代码~

方案一：用split函数路由请求（单客户端多链接） #

这种方法只需要维护一个Apollo Client实例，通过split函数根据请求的特征（比如操作名称、类型）自动路由到对应的端点，缓存还能共享，是大多数场景的首选。

步骤： #

1. 为两个端点分别创建HttpLink
2. 用split定义路由规则
3. 把组合后的链接传入Apollo Client

示例代码： #

import { ApolloClient, InMemoryCache, createHttpLink, split } from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";

// 第一个端点：Hashnode API（你的原有配置）
const hashnodeLink = createHttpLink({
  uri: "https://api.hashnode.com/",
  credentials: "same-origin",
  headers: {
    Authorization: process.env.HASHNODE_AUTH,
  },
});

// 第二个端点：你的自定义API（替换成你的实际端点地址）
const customApiLink = createHttpLink({
  uri: "https://your-personal-api.com/graphql",
  // 这里可以添加第二个端点的认证、请求头等配置
});

// 定义路由规则：根据操作名称判断用哪个链接
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    // 示例：如果操作名称以"Hashnode"开头，就用Hashnode的链接
    // 你也可以根据查询/突变类型、自定义上下文等条件来判断
    return (
      definition.kind === "OperationDefinition" &&
      definition.name?.value.startsWith("Hashnode")
    );
  },
  hashnodeLink, // 满足条件时使用这个链接
  customApiLink // 其他情况使用这个链接
);

// 创建Apollo Client实例
const client = new ApolloClient({
  ssrMode: true,
  link: splitLink,
  cache: new InMemoryCache(),
});

export default client;

方案二：创建多个独立的Apollo Client实例 #

如果两个端点的数据完全不需要共享缓存，或者你想完全隔离两个客户端的配置，这种方法更合适。你可以为每个端点单独创建Client，然后在组件中指定使用哪个客户端。

示例代码： #

1. 拆分客户端配置文件

// hashnodeClient.js
import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";

export const hashnodeClient = new ApolloClient({
  ssrMode: true,
  link: createHttpLink({
    uri: "https://api.hashnode.com/",
    credentials: "same-origin",
    headers: {
      Authorization: process.env.HASHNODE_AUTH,
    },
  }),
  cache: new InMemoryCache(),
});

// customClient.js
import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";

export const customClient = new ApolloClient({
  ssrMode: true,
  link: createHttpLink({
    uri: "https://your-personal-api.com/graphql",
    // 第二个端点的专属配置
  }),
  cache: new InMemoryCache(),
});

2. 在组件中指定客户端

import { useQuery } from "@apollo/client";
import { hashnodeClient } from "./hashnodeClient";
import { customClient } from "./customClient";
import { HASHNODE_QUERY, CUSTOM_API_QUERY } from "./queries";

function MyComponent() {
  // 从Hashnode取数据
  const { data: hashnodeData } = useQuery(HASHNODE_QUERY, {
    client: hashnodeClient,
  });

  // 从自定义API取数据
  const { data: customData } = useQuery(CUSTOM_API_QUERY, {
    client: customClient,
  });

  // 渲染数据...
}

Next.js中的Provider配置 #

如果你用Next.js的App Router，可以在根布局中嵌套多个ApolloProvider，这样组件就能直接通过client参数调用对应客户端：

// app/layout.js
import { ApolloProvider } from "@apollo/client";
import { hashnodeClient } from "../hashnodeClient";
import { customClient } from "../customClient";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ApolloProvider client={hashnodeClient}>
          <ApolloProvider client={customClient}>
            {children}
          </ApolloProvider>
        </ApolloProvider>
      </body>
    </html>
  );
}

总结 #

• 如果两个端点的数据需要共享缓存、配置大部分相同，优先选方案一；
• 如果两个端点完全独立、需要隔离配置和缓存，选方案二。

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