reactjs - La propiedad 'setLink' falta en el tipo 'ApolloClient<NormalizedCacheObject>' pero es obligatoria en el tipo 'ApolloClient<any>'

Estoy configurando un nuevo proyecto de TypeScript con React y Apollo Client. Estoy intentando conectar el cliente de la siguiente manera:

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>
    );
}

Sin embargo, esto genera un error durante la ejecución:

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">

Dado que esto parece ser un problema basado en tipos, intenté ser explícito al crear el cliente de Apollo según el ejemplo aquí: https://github.com/apollographql/apollo-client/issues/2503

const client = new ApolloClient<NormalizedCacheObject>{ ...

Pero nada. No estoy seguro de por qué tengo tipos enfrentados en comparación con ejemplos que funcionan. ¿Ayuda?

Respuesta #1

El paquete @apollo/client contiene las importaciones de bibliotecas previamente desacopladas como apollo-client y apollo-cache-inmemory.

Si tus importaciones se ven así:

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

Cambia a esto:

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

Respuesta #2

Se resolvió el mismo error modificando la interfaz ApolloProviderProps agregando un tipo unión (|) DefaultClient a la propiedad client en el archivo ApolloProvider.d.ts

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>>;