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

Posted 2023-03-10

【中文标题】“ApolloClient<NormalizedCacheObject>”类型中缺少属性“setLink”，但在“ApolloClient<any>”类型中是必需的

【英文标题】：Property 'setLink' is missing in type 'ApolloClient<NormalizedCacheObject>' but required in type '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 的方式。

【参考方案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'

【讨论】：

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