@apollo/client配置多GraphQL端点后查询持续加载无报错如何解决

ApolloLink.split 仅支持3个入参：第一个为条件判断函数，第二个为条件为真时执行的链路，第三个为条件为假时执行的 fallback 链路。你当前配置传入了6个参数，后续的多组判断逻辑和链路都被直接丢弃，仅第一组clientName === "adminGQL"的判断生效。当请求携带的clientName为agentGQL或client时，没有匹配到可用执行链路，请求被永久挂起，所以一直处于加载状态无返回。

另外你原配置中client对应的链路错误指向了httpLinkAgent，也是潜在问题。

两种可选方案：

方案1：嵌套使用split #

按规则层层嵌套split实现多条件判断，修正后的App.js配置如下：

const client = new ApolloClient({
    link: ApolloLink.split(
      operation => operation.getContext().clientName === "adminGQL",
      authLink.concat(httpLinkAdmin), 
      ApolloLink.split(
        operation => operation.getContext().clientName === "agentGQL",
        authLink.concat(httpLinkAgent),
        authLink.concat(httpLinkClient) // 替换为client对应的实际httpLink
      )
    ),
    cache: new InMemoryCache(),
    credentials: 'include'
});

方案2：自定义链路分发（更适合多端点场景） #

直接写自定义链路根据clientName分发，逻辑更清晰易维护：

// 自定义多端点分发链路
const multiEndpointLink = new ApolloLink((operation, forward) => {
  const { clientName } = operation.getContext();
  let targetLink;
  switch(clientName) {
    case 'adminGQL':
      targetLink = authLink.concat(httpLinkAdmin);
      break;
    case 'agentGQL':
      targetLink = authLink.concat(httpLinkAgent);
      break;
    case 'client':
      targetLink = authLink.concat(httpLinkClient);
      break;
    default:
      // 兜底逻辑，避免无匹配导致请求挂起
      targetLink = authLink.concat(httpLinkClient);
  }
  return targetLink.request(operation, forward);
});

const client = new ApolloClient({
  link: multiEndpointLink,
  cache: new InMemoryCache(),
  credentials: 'include'
});

你使用的@apollo/client 3.x版本已经内置了ApolloLink实现，不需要单独依赖apollo-link包，版本不匹配可能引发隐藏问题，可后续移除单独的apollo-link依赖，将导入语句改为import { ApolloLink } from '@apollo/client'即可。

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