在 Apollo 客户端中使用多个端点答案

【问题标题】：Using multiple endpoints in Apollo Client在 Apollo 客户端中使用多个端点
【发布时间】：2021-12-06 06:36:08
【问题描述】：

这是我在这里的第一篇讨论帖。我通过Odyssey了解了Apollo + GraphQL。目前，我正在使用 Next.js 构建自己的项目，该项目需要从 2 个 GraphQL 端点 获取数据。

我的问题：如何使用ApolloClient从多个 GraphQL 端点获取数据？

下面是我的第一个端点的代码：

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

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

export default client;

【问题讨论】：

能否提供您的 ApolloClient 配置代码？
嗨，这是我为我的第一个客户端端点编写的内容。我正计划添加另一个端点，但在 Internet 上找不到任何解决方案。
import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client"; const client = new ApolloClient({ ssrMode: true, link: createHttpLink({ uri: "https://api.hashnode.com/", credentials: "same-origin", headers: { Authorization: process.env.HASHNODE_AUTH, }, }), cache: new InMemoryCache(), }); export default client; @JacekWalasik 以上是我的代码。 :)
@JacekWalasik 你能看看我下面的评论吗？当我将令牌放入 .env.local 文件并在其他文件中使用令牌时，我面临的问题是我的标头不再工作。

标签： javascript graphql next.js apollo apollo-client

【解决方案1】：

您想要完成的有点违背 Apollo 的“One Graph”方法。看看网关和联邦 - https://www.apollographql.com/docs/federation/

话虽如此，一些 hacky 解决方案是可能的，但您需要维护更复杂的结构并在每个查询中指定端点，这会破坏内置机制并可能导致优化问题。

//Declare your endpoints
const endpoint1 = new HttpLink({
    uri: 'https://api.hashnode.com/graphql',
    ...
})
const endpoint2 = new HttpLink({
    uri: 'endpoint2/graphql',
    ...
})

//pass them to apollo-client config
const client = new ApolloClient({
    link: ApolloLink.split(
        operation => operation.getContext().clientName === 'endpoint2',
        endpoint2, //if above 
        endpoint1
    )
    ...
})

//pass client name in query/mutation
useQuery(QUERY, {variables, context: {clientName: 'endpoint2'}})

这个包似乎做你想做的事：https://github.com/habx/apollo-multi-endpoint-link

另外，请查看此处的讨论：https://github.com/apollographql/apollo-client/issues/84

【讨论】：

我可以知道如何添加标题吗？ //Declare your endpoints const endpoint1 = new HttpLink({ uri: 'https://api.hashnode.com/graphql', ... }) const endpoint2 = new HttpLink({ uri: 'endpoint2/graphql', ... }) //pass them to apollo-client config const client = new ApolloClient({ link: ApolloLink.split( operation => operation.getContext().clientName === 'endpoint2', endpoint2, //if above endpoint1 ) ... }) //pass client name in query/mutation useQuery(QUERY, {variables, context: {clientName: 'endpoint2'}})
我假设与您之前所做的相同：const endpoint1 = new HttpLink({ uri: '...', credentials: credentials, headers: headers})。这样不行吗？
谢谢。我解决了我的问题。
如果我这样写，我的标题将不再起作用：const endpoint2 = new HttpLink({ uri: "https://api.github.com/graphql", headers: { Authorization: Bearer ${process.env.GITHUB_ACCESS_TOKEN}, }, });
这是出乎意料的，可能是模板文字使用不正确 - 试试headers: { authorization: `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`}