WebSocket connection fails.

Hi,

I am trying to implement WebSocket subscriptions to Hasura and here is my client setup:

import ApolloClient from 'apollo-client';
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
import { InMemoryCache } from 'apollo-cache-inmemory';

import { getToken } from 'services/auth0'
import { hasura } from 'config'

class HasuraDAO {
  constructor() {
    const wsLink = new WebSocketLink({
      uri: hasura.wsUrl,
      options: {
        reconnect: true,
        timeout: 30000
      }
    });
    const httpLink = new HttpLink({
      uri: hasura.httpUrl,
      headers: {
        'Authorization': `Bearer ${getToken()}`
      }
    })

    const link = split(
      ({ query }) => {
        const { kind, operation } = getMainDefinition(query);
        return kind === 'OperationDefinition' && operation === 'subscription';
      },
      wsLink,
      httpLink,
    )
    
    this.client = new ApolloClient({
      link,
      cache: new InMemoryCache()
    });
  }
}

export default new HasuraDAO()

This is the call of client.subscribe function:

import Hasura from 'dao/hasura/HasuraDAO';
import gql from 'graphql-tag';

const query = gql`subscription {
  users {
    id
  }
}`

const observable = Hasura.client.subscribe({ query });
observable.subscribe({
  next: ({ data }) => console.log(data)
});

I think I’m doing it all right, but still getting this error:

client.js:426 WebSocket connection to 'ws://localhost:8081/v1alpha1/graphql' failed: Data frame received after close

Can you please help me finding my mistake?

[coco98]

Re-opening this issue so that we add it to our docs! Thanks @russc for bringing it back up.

[dedan]

Even with the solution of @louisdvs I still get this error when using wss: instead of ws:.

Does anybody know how to fix this?