属性 'setLink' 在类型 'ApolloClient<NormalizedCacheObject>' 中缺失，但在类型 'ApolloClient<any> 中是必需的

Question

我正在使用 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>{ ...

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

Answer 1

@apollo/client 包包含从以前解耦的库中导入的内容，例如 apollo-client 和 阿波罗缓存内存.

如果您的导入是这样的：

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

切换到这个：

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

Answer 2

通过向文件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>>;

Answer 3

这解决了我的问题。

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

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

Answer 4

这里没有 个答案，github issue #3639 and github issue #7309 对我有用。

我正在使用 apollo-boost、@apollo/react-hooks。

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

The Apollo Boost project is now retired, because Apollo Client 3.0 provides a similarly straightforward setup.

With Apollo Client 3.0, the apollo-client package is retired in favor of @apollo/client. As part of migrating, remove all apollo-client dependencies.

链接：

Migrating

Setting up @apollo/client 3.0

属性 'setLink' 在类型 'ApolloClient<NormalizedCacheObject>' 中缺失，但在类型 'ApolloClient<any> 中是必需的

Property 'setLink' is missing in type 'ApolloClient<NormalizedCacheObject>' but required in type 'ApolloClient<any>

reactjs

typescript

react-apollo

apollo-client