ApolloClient createHttpLink 打字稿错误 2739答案

【问题标题】：ApolloClient createHttpLink typescript error 2739ApolloClient createHttpLink 打字稿错误 2739
【发布时间】：2021-12-23 15:29:00
【问题描述】：

我正在创建我的 React 前端，使用 apollo 客户端连接到我的 apollo 服务器：

App.tsx

import React from "react";
import "./app.scss";

import {
  ApolloLink,
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
} from "@apollo/client";
import { createHttpLink } from "apollo-link-http";

function App() {
  const client = new ApolloClient({
    **link**: createHttpLink({
      uri: "http://localhost:4000/graphql",
      credentials: "include",
    }),
    cache: new InMemoryCache(),
  });
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <h1>Hello there</h1>
      </div>
    </ApolloProvider>
  );
}

export default App;

顺便说一句，我正在使用打字稿。

由于某种原因，我收到了打字稿错误。当我将鼠标悬停在 ApolloClient 配置中的 link 参数上时，它会显示：

Type 'ApolloLink' is missing the following properties from type 'ApolloLink': onError, setOnError ts(2739)

ApolloClient.d.ts(20, 5): 

The expected type comes from property 'link' which is declared here on type 'ApolloClientOptions<NormalizedCacheObject>'

【问题讨论】：

标签： reactjs typescript apollo-client

【解决方案1】：

您可以使用HttpLink 的@apollo/client 包。 apollo-link-http 包包含在@apollo/client 包中，请参阅Migrate to Apollo client v3

apollo-link、apollo-link-http 和 apollo-link-http-common 的所有功能都包含在 @apollo/client 包中。

作为迁移的一部分，我们建议删除所有 apollo-link、apollo-link-http 和 apollo-link-http-common 依赖项。

import React from 'react';
import { ApolloClient, ApolloProvider, InMemoryCache, HttpLink } from '@apollo/client';

function App() {
  const client = new ApolloClient({
    link: new HttpLink({
      uri: 'http://localhost:4000/graphql',
      credentials: 'include',
    }),
    cache: new InMemoryCache(),
  });
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <h1>Hello there</h1>
      </div>
    </ApolloProvider>
  );
}

export default App;

包版本："@apollo/client": "^3.4.7"

【讨论】：