TypeScript创建ApolloClient遇ApolloLink类型错误求指导

你遇到的这个类型错误，本质是不同版本Apollo相关包的类型定义冲突——在Apollo Client 3.x及以后的版本里，大部分Link功能已经整合到@apollo/client核心包中，而你当前混用了旧版独立的apollo-link-*包和新版核心包，导致类型校验不通过。下面是具体的解决步骤：

1. 统一依赖来源，移除独立的apollo-link包 #

首先卸载那些已经被整合进核心包的独立依赖：

npm uninstall apollo-link-context apollo-link-http
# 如果你用yarn的话：
yarn remove apollo-link-context apollo-link-http

然后修改导入语句，从@apollo/client的子模块中获取所需工具：

// 替换原apollo-link-context的导入
import { setContext } from '@apollo/client/link/context';
// 替换原apollo-link-http的导入
import { createHttpLink } from '@apollo/client/link/http';

2. 调整Link组合方式（更稳妥的写法） #

虽然concat方法本身可用，但改用@apollo/client提供的from方法组合多个Link，能更好地规避类型匹配问题：

import { from } from '@apollo/client';

// 保留你原有的authLink和httpLink定义
const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('consequat-token');
  return {
    headers: {
      ...headers,
      authorization: token ? `bearer ${token}` : null
    }
  };
});

const httpLink = createHttpLink({ uri: 'http://localhost:4000' });

// 用from方法组合authLink和httpLink
const combinedHttpLink = from([authLink, httpLink]);

// 后续splitLink中使用combinedHttpLink替代authLink.concat(httpLink)
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  combinedHttpLink
);

3. 确保依赖版本一致 #

检查package.json中@apollo/client和@apollo/link-ws的版本，如果版本差异较大，统一升级到最新稳定版：

npm install @apollo/client@latest @apollo/link-ws@latest graphql@latest
# yarn用户：
yarn upgrade @apollo/client @apollo/link-ws graphql --latest

完成以上操作后，类型错误应该就能消除了。核心思路就是让所有Link相关的工具都来自同一个版本的@apollo/client生态，避免跨版本的类型定义冲突。

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