ApolloClient Type errors for ApolloLink

Question

I'm trying to create ApolloClient using TypeScript, but there are some type-errors that I can't resolve. Can anyone point me to right direction what to do?

Below are the sample code (which is working ok with JavaScript) for creating client:

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

import { setContext } from 'apollo-link-context';
import { createHttpLink } from 'apollo-link-http';
import { getMainDefinition } from '@apollo/client/utilities';
import { WebSocketLink } from '@apollo/link-ws';

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('consequat-token');
  return {
    headers: {
      ...headers,
      authorization: token ? `bearer ${token}` : null
    }
  };
});

const httpLink = createHttpLink({ uri: 'http://localhost:4000' });

const wsLink = new WebSocketLink({
  uri: 'ws://localhost:4000/graphql',
  options: { reconnect: true },
});

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  authLink.concat(httpLink)
);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: splitLink
});

Problem is that authLink.concat(httpLink) line is complaining:

Argument of type 'ApolloLink' is not assignable to parameter of type 'ApolloLink | RequestHandler | undefined'.
Type 'ApolloLink' is missing the following properties from type 'ApolloLink': onError, setOnError ts(2345)

I can't find any answers from Apollo docs or Google.

Menis

Answer 1

Answer to my own post:

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

import { setContext } from 'apollo-link-context';
import { createHttpLink } from 'apollo-link-http';
import { getMainDefinition } from '@apollo/client/utilities';
import { WebSocketLink } from '@apollo/link-ws';

needs to be changed to:

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

import { setContext } from '@apollo/link-context';
import { getMainDefinition } from '@apollo/client/utilities';
import { WebSocketLink } from '@apollo/link-ws';

those @apollo/ and apollo- libraries was not compatible. Also, createHttpLink replaced with HttpLink imported from @apollo/client, and it's usage:

const httpLink = createHttpLink({ uri: 'http://localhost:4000' });

changed to:

const httpLink = new HttpLink({ uri: 'http://localhost:4000' });

Menis

On @apollo/client 3.2.5 I get "Type 'HttpLink' is not assignable to type 'string | UriFunction | undefined'" – Ruscio

Answer 2

For Apollo Client v3:

All of the @apollo/link-* packages are now part of @apollo/client, as mentioned in the migration guide.

Updated imports:

import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache, split } from '@apollo/client';
import { getMainDefinition } from '@apollo/client/utilities';
import { setContext } from '@apollo/client/link/context';
import { WebSocketLink } from '@apollo/client/link/ws';

Check out Apollo Link Overview for more info.

Mallet

Answer 3

changing this import worked for me:

import { setContext } from "@apollo/client/link/context";

Chemulpo