I am creating my React frontend, using apollo client to connect to my apollo server:

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;

I am using typescript by the way.

For some reason I am getting a typescript error. When I hover over the word link parameter in the ApolloClient config, it shows this:

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

ApolloClient.d.ts(20, 5): 

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

CodePudding user response：

You can use the HttpLink of @apollo/client package. apollo-link-http package is included in @apollo/client package, see Migrate to Apollo client v3

All apollo-link, apollo-link-http, and apollo-link-http-common functionality is included in the @apollo/client package.

As part of migrating, we recommend removing all apollo-link, apollo-link-http, and apollo-link-http-common dependencies.

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;

package version: "@apollo/client": "^3.4.7"