Type 'ApolloLink' is not assignable to type 'ApolloLink'

Intended outcome: This TypeScript error occurs with a link chain using additive composition and @apollo/client. The goal is to create an Apollo Link composed of an Error Link, a Context Link and an HttpLink or HttpBatchLink.

import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from '@apollo/client';
import { BatchHttpLink } from '@apollo/link-batch-http';
import { onError } from '@apollo/link-error';
import AuthLink from './authLink'

let httpLink: HttpLink | BatchHttpLink;
if (enableBatching === true) {
  httpLink = new BatchHttpLink({
    ...authenticatedHttpSettings,
    batchMax: 30,
  });
} else {
  httpLink = new HttpLink(authenticatedHttpSettings);
}

const errorLink = onError(({ graphQLErrors, operation }) => {
  if (graphQLErrors) {...}
});

const link = from([errorLink, AuthLink(), httpLink]);

  const testApi = new ApolloClient({
    connectToDevTools: true,
    link,
    cache: new InMemoryCache(),
  })

Actual outcome: TypeScript throws an error: Type ‘ApolloLink’ is not assignable to type ‘ApolloLink | RequestHandler’.

How to reproduce the issue: I assume the issue is related to different type definitions for Apollo Link. This should be reproducible with the given code in a Typescript / React environment.

How to solve this issue Currently @apollo/link-http-batch v.2.0.0-beta.3 is using @apollo/client v.3.0.0-beta.23. Downgrading my @apollo/client to 3.0.0-beta.23 worked, but to solve this issue the @apollo/client version should be upgraded in all link packages.

Versions

"react": "^16.12.0",
"react-dom": "^16.12.0",
 "typescript": "^3.7.3",
"@apollo/client": "^3.0.0-beta.38",
"@apollo/link-batch-http": "^2.0.0-beta.3",
"@apollo/link-context": "^2.0.0-beta.3",
"@apollo/link-error": "^2.0.0-beta.3",
"apollo": "^2.24.0",

Full Stack Trace

Type 'import("/path/node_modules/@apollo/link-batch-http/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' is not assignable to type 'import("/path/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink'.
  Types of property 'split' are incompatible.
    Type '(test: (op: import("/path/node_modules/@apollo/link-batch-http/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/path/node_modules/@apollo/link-batch-http/node_modules/@apollo/client/...' is not assignable to type '(test: (op: import("/path/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/path/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/path...'.
      Types of parameters 'left' and 'left' are incompatible.
        Type 'import("/path/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/path/node_modules/@apollo/client/link/core/types").RequestHandler' is not assignable to type 'import("/path/node_modules/@apollo/link-batch-http/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/path/node_modules/@apollo/link-batch-http/node_modules/@apollo/client/link/core/types").Reque...'.
          Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.
            Type 'import("/path/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' is not assignable to type 'import("/path/node_modules/@apollo/link-batch-http/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink'.
              Types of property 'split' are incompatible.
                Type '(test: (op: import("/path/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/path/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/path...' is not assignable to type '(test: (op: import("/path/node_modules/@apollo/link-batch-http/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/path/node_modules/@apollo/link-batch-http/node_modules/@apollo/client/...'.
                  Types of parameters 'left' and 'left' are incompatible.
                    Type 'import("/path/node_modules/@apollo/link-batch-http/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/path/node_modules/@apollo/link-batch-http/node_modules/@apollo/client/link/core/types").Reque...' is not assignable to type 'import("/path/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/path/node_modules/@apollo/client/link/core/types").RequestHandler'.
                      Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.```

[afroald]

The solution for me was to use the links included in @apollo/client instead of the @apollo/link-* packages. See the part about links in the migration docs for more information:

https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/#apollo-link-

[khanakia]

@dep-dt You should import like this and that is what @afroald mentioned above.

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

Remove those packages @apollo/link-context and @apollo/link-error as those are already included in the @apollo/client