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'.

[shshaw]

This happened to me recently with @apollo/client 3.11.10. The issue seemed to be due to another library with a graphql-tag or graphql package dependency that had a slight version mismatch. Updating graphql-tag and graphql packages to the latest versions in my dependencies seemed to resolve the problem.

[jerelmiller]

Hey all 👋

I've seen this a few times myself come up and this is usually a symptom that you have multiple versions of Apollo Client installed. The fix is to ensure you're only installing a single version. I've seen this come up when dependencies themselves depend on @apollo/client or you're working in a monorepo with multiple projects depending on @apollo/client.

As such, there is not much we can do our our side, so I'm going to go ahead and close this.

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.