Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.

[chetankondawle]

Getting Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler' on 3.6.10 upgrade. Code is throwing error on httpLink and authLink

const httpLink = new HttpLink({ uri: "/test" });

const authLink = new ApolloLink((operation, forward) => {
  // add the authorization to the headers
  const token = sessionStorage.getItem("token");
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  }));

  return forward(operation);
});

const middleWareLink = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      "Content-Type": "application/json"
    }
  }));

  return forward(operation);
});

const customApiClient = new ApolloClient({
  link: from([authLink, middleWareLink, httpLink]), // Provide required constructor fields
  cache: new InMemoryCache(),
});

Intended outcome: Should work as it was working with 3.6.9

Actual outcome: Throwing Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler' on 3.6.10 upgrade.

Versions : @apollo/client : 3.6.10

[bignimbus]

Hi @chetankondawle 👋🏻 thanks for opening this issue! I've set up a codesandbox in an attempt to reproduce the type error you're seeing. I haven't yet been successful. Perhaps the type annotation of middleWareLink is relevant? I don't see where it's defined in the code sample. Let us know if you have additional information that could help us narrow things down 🙏🏻

[jerelmiller]

@bignimbus looks like you might have accidentally used the issue URL for your codesandbox link 😆. Would you mind updating your comment to point to your codesandbox example?

[bignimbus]

Updated - thanks for catching that @jerelmiller

[chetankondawle]

@bignimbus I have mentioned @apolloClient : 3.6.9 as peer dependency in my custom library called @customapi/apolloClientWrapper. When using @customapi/apolloClientWrapper NPM is installing 3.6.10 in my main Project and hence I am able to see this issue.

Below is the error I am getting, if that helps.

Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.
  Type 'import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@customapi/apolloClientWrapper/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' is not assignable to type 'import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink'.
    Types of property 'split' are incompatible.
      Type '(test: (op: import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@customapi/apolloClientWrapper/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@customapi/apolloClientWrapper/node_modules/@apollo/client/link/core/Apollo...' is not assignable to type '(test: (op: import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/Users/chetankondawle/Documents/MY...'.
        Types of parameters 'left' and 'left' are incompatible.
          Type 'import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@apollo/client/link/core/types").RequestHandler' is not assignable to type 'import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@customapi/apolloClientWrapper/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@customapi/apolloClientWrapper/node_modules/@apollo/client/link/core/types").RequestHandler'.
            Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.
              Type 'import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' is not assignable to type 'import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@customapi/apolloClientWrapper/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink'.
                Types of property 'split' are incompatible.
                  Type '(test: (op: import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/Users/chetankondawle/Documents/MY...' is not assignable to type '(test: (op: import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@customapi/apolloClientWrapper/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@customapi/apolloClientWrapper/node_modules/@apollo/client/link/core/Apollo...'.
                    Types of parameters 'right' and 'right' are incompatible.
                      Type 'import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@customapi/apolloClientWrapper/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@customapi/apolloClientWrapper/node_modules/@apollo/client/link/core/types").RequestHandler | unde...' is not assignable to type 'import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/Users/chetankondawle/Documents/MY_REPO/my-main-project/node_modules/@apollo/client/link/core/types").RequestHandler | undefined'.
                        Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler | undefined'.