“ApolloClient<NormalizedCacheObject>”类型中缺少属性“setLink”，但在“ApolloClient<any>”类型中是必需的答案

【问题标题】：Property 'setLink' is missing in type 'ApolloClient<NormalizedCacheObject>' but required in type 'ApolloClient<any>“ApolloClient<NormalizedCacheObject>”类型中缺少属性“setLink”，但在“ApolloClient<any>”类型中是必需的
【发布时间】：2020-11-10 07:20:05
【问题描述】：

我正在使用 react 和 apollo 客户端建立一个新的打字稿项目。我正在尝试像这样连接客户端：

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'http://localhost:3000/graphql',
    headers: {
      authorization: localStorage.getItem('token'),
    },
  }),
});

function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App">
       ...content goes here
      </div>
    </ApolloProvider>
    );
}

但是，这会在运行时引发错误：

TypeScript error in /src/App.tsx(60,21):
Property 'setLink' is missing in type 'ApolloClient<NormalizedCacheObject>' but required in type 'ApolloClient<any>'.  TS2741

    58 | function App() {
    59 |   return (
  > 60 |     <ApolloProvider client={client}>
       |                     ^
    61 |       <div className="App">

由于这似乎是一个基于类型的问题，因此我在根据此处的示例创建 Apollo 客户端时尝试明确：https://github.com/apollographql/apollo-client/issues/2503

const client = new ApolloClient<NormalizedCacheObject>{ ...

但没有骰子。与工作示例相比，我不确定为什么我有决斗类型。帮忙？

【问题讨论】：

我猜这就是你强制用户迁移到@apollo/client 3.0.0 的方式。

标签： reactjs typescript react-apollo apollo-client

【解决方案1】：

非这里的答案，github issue #3639 和 github issue #7309 对我有用。

我使用的是apollo-boost、@apollo/react-hooks。

我迁移到Apollo Client 3.0，来自文档的注释：

Apollo Boost 项目现已退役，因为 Apollo Client 3.0 提供了类似的简单设置。

在 Apollo Client 3.0 中，apollo-client 包被弃用 @apollo/客户。作为迁移的一部分，删除所有 apollo-client 依赖关系。

链接：

Migrating

Setting up @apollo/client 3.0

【讨论】：

【解决方案2】：

这解决了我的问题。

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

const client = new ApolloClient({
  uri: 'your_graphql_endpoint',
  cache: new InMemoryCache(),
});

【讨论】：

这个解决了我的问题

【解决方案3】：

通过在文件 ApolloProvider.d.ts 的客户端属性中添加联合类型 (|) DefaultClient 解决了修改接口 ApolloProviderProps 的相同错误

import React from 'react';
import { ApolloClient } from '../../core';
export interface ApolloProviderProps<TCache> {
    client: ApolloClient<TCache> | DefaultClient<TCache>;
    children: React.ReactNode | React.ReactNode[] | null;
}
export declare const ApolloProvider: React.FC<ApolloProviderProps<any>>;

【讨论】：

【解决方案4】：

@apollo/client 包包含从以前解耦的库（如 apollo-client 和 apollo-cache-inmemory）的导入。 p>

如果您的导入如下所示：

import { ApolloClient } from 'apollo-client'
import { InMemoryCache, NormalizedCacheObject } from 'apollo-cache-inmemory'

切换到这个：

import {
  ApolloClient,
  InMemoryCache,
  NormalizedCacheObject,
} from '@apollo/client'

【讨论】：

我对他们制造的包裹误导越来越感到沮丧。