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 和 apollo-cache-inmemory ）的导入。

>

如果您的导入内容如下：

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

切换到此：

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

Answer 2

通过将联合类型（|）DefaultClient添加到文件ApolloProvider.d.ts中的客户端属性，解决了修改接口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 和 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/client。作为迁移的一部分，删除所有 apollo-client 依赖。

链接：

Migrating

Setting up @apollo/client 3.0

类型'ApolloClient <NormalizedCacheObject>'中缺少属性'setLink'，但类型'ApolloClient <any>中必需

4 个答案: