ApolloLink 的 ApolloClient 类型错误

Posted 2023-03-10

【中文标题】ApolloLink 的 ApolloClient 类型错误

【英文标题】：ApolloClient Type errors for ApolloLink

【发布时间】：2020-10-30 00:03:51

【问题描述】：

我正在尝试使用 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 docs 或 Google 中找到任何答案。

【参考方案1】：

回答我自己的帖子：

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

【讨论】：

在@apollo/client 3.2.5 我得到“类型'HttpLink'不可分配给类型'string | UriFunction | undefined'”

【参考方案2】：

更改此导入对我有用：

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

【参考方案3】：

对于 Apollo Client 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 了解更多信息。