question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

type WebSocketLink is invalid on split() junction

See original GitHub issue

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",
}

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:9
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

13reactions
YvanGuidoincommented, Jul 15, 2020

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

import { WebSocketLink } from "@apollo/client/link/ws";
1reaction
0xAsimetriqcommented, Jun 17, 2020

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

Screenshot 2020-06-17 at 12 57 13
Read more comments on GitHub >

github_iconTop Results From Across the Web

Handling errors for Apollo Client when using ApolloLink.split
I have a simple code: import { split } from 'apollo-link ...
Read more >
WebSocket connection to 'ws://localhost:4000/graphql' failed
Hi, I am running into an issue on my front-end (Vue 2) when trying to connect to the web socket. I've tried several...
Read more >
How to use the apollo-link.ApolloLink.split function in ... - Snyk
ApolloLink.split examples, based on popular ways it is used in public projects. ... new ApolloClient({ link, cache: new InMemoryCache() }); return client; }....
Read more >
akka.stream.scaladsl.Flow Scala Example - ProgramCreek.com
This page shows Scala examples of akka.stream.scaladsl.Flow.
Read more >
Subscriptions with Vue Apollo Next - Dev Support - 8base
const apolloClient = new ApolloClient({ /* Split link */ link, ... Create the subscription websocket link const wsLink = new WebSocketLink({ ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found