ApolloLink 的 ApolloClient 类型错误

Question

我正在尝试使用 TypeScript 创建 ApolloClient，但存在一些我无法解决的类型错误。谁能给我指出正确的方向该怎么做？

下面是用于创建客户端的示例代码（可以与 JavaScript 一起使用）：

import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
  split
} from '@apollo/client';

import { setContext } from 'apollo-link-context';
import { createHttpLink } from 'apollo-link-http';
import { getMainDefinition } from '@apollo/client/utilities';
import { WebSocketLink } from '@apollo/link-ws';

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' });

const wsLink = new WebSocketLink({
  uri: 'ws://localhost:4000/graphql',
  options: { reconnect: true },
});

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  authLink.concat(httpLink)
);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: splitLink
});

问题是 authLink.concat(httpLink) 行在抱怨：

Argument of type 'ApolloLink' is not assignable to parameter of type 'ApolloLink | RequestHandler | undefined'.
Type 'ApolloLink' is missing the following properties from type 'ApolloLink': onError, setOnError ts(2345)

我无法从 Apollo 文档或 Google 中找到任何答案。

Answer 1

我自己的答案 post:

import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
  split
} from '@apollo/client';

import { setContext } from 'apollo-link-context';
import { createHttpLink } from 'apollo-link-http';
import { getMainDefinition } from '@apollo/client/utilities';
import { WebSocketLink } from '@apollo/link-ws';

需要改为：

import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
  HttpLink,
  split
} from '@apollo/client';

import { setContext } from '@apollo/link-context';
import { getMainDefinition } from '@apollo/client/utilities';
import { WebSocketLink } from '@apollo/link-ws';

那些 @apollo/ 和 apollo- 库不兼容。此外，createHttpLink 替换为从 @apollo/client 导入的 HttpLink，其用法：

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

更改为：

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

Answer 2

更改此导入对我有用：

import { setContext } from "@apollo/client/link/context";

Answer 3

对于 Apollo 客户端 v3：

所有 @apollo/link-* 包现在都是 @apollo/client 的一部分，如 migration guide 中所述。

更新的导入：

import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache, split } from '@apollo/client';
import { getMainDefinition } from '@apollo/client/utilities';
import { setContext } from '@apollo/client/link/context';
import { WebSocketLink } from '@apollo/client/link/ws';

查看 Apollo Link Overview 了解更多信息。

ApolloLink 的 ApolloClient 类型错误

ApolloClient Type errors for ApolloLink

typescript

reactjs

apollo-client