reactjs - 属性 'setLink' 在类型 'ApolloClient' 中缺失，但在类型 'ApolloClient 中需要

Question

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

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>{ ...

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

Answer 1

@apollo/client 包包含从以前解耦的库(如 apollo-client 和 apollo-cache-inmemory)的导入。
如果您的导入如下所示:

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

切换到这个:

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