具有多个 GraphQL 端点的 Apollo

Question

我需要使用多个 GraphQL 模式，我目前已经安装了

expo: sdk 42 "@apollo/client": "^3.4.11", "apollo-link": "^1.2.14", "graphql" : "^15.5.3",

只要我使用单一模式一切正常：单一模式声明

App.js

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

const httpLink = createHttpLink({
    uri: `${serverBaseUrl}/client/graphql`,
  });


const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        /**@all headers*/
      }
    }
  });

const client = new ApolloClient({
   link: authLink.concat(httpLink),
   cache: new InMemoryCache(),
   credentials: 'include'
});

<ApolloProvider client={client}>
 /**@all*/

Query Example.jsx

import { gql, useQuery } from "@apollo/client";

  const E_QUERY = gql`
  query{
      example(sortBy: { field: "updatedAt", order: DESC }){
        _id
      }
  }
`;

const { loading, data } = useQuery(E_QUERY , {    
    fetchPolicy: "network-only",
  });

暂时还好

but when I add multiple schemas it doesn't generate any error, it just keeps loading alone

App.js

const client = new ApolloClient({
    link: ApolloLink.split(
      operation => operation.getContext().clientName === "adminGQL",
      authLink.concat(httpLinkAdmin), 
      operation => operation.getContext().clientName === "agentGQL",
      authLink.concat(httpLinkAgent), 
      operation => operation.getContext().clientName === "client",
      authLink.concat(httpLinkAgent), 
    ),
    cache: new InMemoryCache(),
    credentials: 'include'
  });

Example.jsx

const { loading, data } = useQuery(EXAMPLE_QUERY , {    
    fetchPolicy: "network-only",
    context: { clientName: 'client' }
  });

谢谢

Answer 1

检测到的第一个错误是ApolloLink.split只能进行比较，它只有两种可能的情况（true或false）所以不能添加两个以上的url，那么如何添加超过 2 个网址？

ApolloLink.d.ts

static split(test: (op: Operation) => boolean, left: ApolloLink | RequestHandler, right?: ApolloLink | RequestHandler): ApolloLink;

从这一点出发，我们有如下解决方案

const client = new ApolloClient({
    link: ApolloLink.split(
      operation => operation.getContext().clientName === "adminGQL",
      authLink.concat(httpLinkAdmin), 
      authLink.concat(ApolloLink.split(
        operation => operation.getContext().clientName === "agentGQL",
        httpLinkAgent, 
        httpLink
      ))
    ),
    cache: new InMemoryCache(),
    credentials: 'include'
  });

它可能不是最好的解决方案，但它是我能够构建的解决方案。因此，欢迎提出新的建议或解决方案。

具有多个 GraphQL 端点的 Apollo

Apollo with multiple GraphQL endpoints

apollo

reactjs

graphql

react-native

expo