Apollo-client: type WebSocketLink is invalid on split() junction

[IljaDaderko]

Intended outcome:

Per documentation, we need to use splitLink approach in order to have http and websocket links: https://www.apollographql.com/docs/react/v3.0-beta/data/subscriptions/#3-use-different-transports-for-different-operations

In following setup, when passing wsLink to split function a type error is thrown

Argument of type 'WebSocketLink' is not assignable to parameter of type 'ApolloLink | RequestHandler'.
Type 'WebSocketLink' is not assignable to type 'ApolloLink'.
Types of property 'split' are incompatible.

import { ApolloClient, HttpLink, InMemoryCache, split } from '@apollo/client';
import { getMainDefinition } from '@apollo/client/utilities';
import { WebSocketLink } from '@apollo/link-ws';

const GRAPHQL_URL = 'myApp.dev/v1/graphql';

const httpLink = new HttpLink({
  uri: `https://${GRAPHQL_URL}`
});

const wsLink = new WebSocketLink({
  uri: `ws://${GRAPHQL_URL}`
});

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);

    return (
      definition.kind === 'OperationDefinition' && definition.operation === 'subscription'
    );
  },
  wsLink, // Invalid type
  httpLink
);

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

How to reproduce the issue:

Follow set up instructions here https://www.apollographql.com/docs/react/v3.0-beta/data/subscriptions/#3-use-different-transports-for-different-operations

Versions

System:
    OS: macOS 10.15.4
  Binaries:
    Node: 14.2.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 81.0.4044.138
    Safari: 13.1

{
    "@apollo/client": "3.0.0-beta.49",
    "@apollo/link-ws": "2.0.0-beta.3",
    "subscriptions-transport-ws": "0.9.16",
    "graphql": "15.0.0",
}

[tsaiDavid]

@hwillson @IljaDaderko - we were seeing this with @apollo/client on 3.0.0-beta.50, after upgrading to 3.0.0-rc.0 we still saw the same error upon building for production, but were able to "fix" the issue by adding the following to our package.json as a hopefully temporary fix (@dmi3y):

  "resolutions": {
    "@apollo/client": "3.0.0-rc.0"
  },

[eDubrovsky]

I have the same error with "@apollo/client": "3.0.0-rc.2"

[kale5in]

"@apollo/client": "^3.0.0-rc.5", - Fixed this error.

[IljaDaderko]

@kale5in I still see this error while using concat and from methods on rc5

[hwillson]

We're just waiting until https://github.com/apollographql/apollo-client/pull/6577 is in place, before looking into this further.

[YvanGuidoin]

Not doing it anymore if you take the Link from the @apollo/client package directly.

import { WebSocketLink } from "@apollo/client/link/ws";