Can't subscribe to subscription with React but can by using GraphiQL

[Antoine-C]

Intended outcome:

I'm trying to setup subscription with react hooks and apollo-client. I'm using apollo-server-hapi in the backend to handle GraphQL with Hapi. I'm pretty confident my backend is setup correctly given I can see when a new client subscribe and furthermore I can get subscription to work with graphiql.

Client setup

index.js

import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloProvider } from "@apollo/react-hooks";
import { WebSocketLink } from "apollo-link-ws";
import { getMainDefinition } from "apollo-utilities";
import { split } from "apollo-link";
import { HttpLink } from "apollo-link-http";

const httpLink = new HttpLink({
    uri: "http://localhost:3000/graphql"
});

const wsLink = new WebSocketLink({
    uri: `ws://localhost:3000/graphql`,
    options: {
      reconnect: true,
      connectionParams: async () => {
        return "hello world";
      }
    }
});

const link = split(
    // split based on operation type
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query);
      return kind === "OperationDefinitions" && operation === "subscription";
    },
    wsLink,
    httpLink
);

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


 ReactDOM.render(
      <Provider store={store}>
        <BrowserRouter>
            <ApolloProvider client={client}>
              <MyAppContent />
            </ApolloProvider>
        </BrowserRouter>
      </Provider>,
      document.getElementById("root")
);

In my component

import { useSubscription } from "@apollo/react-hooks";
import gql from "graphql-tag";

const COMMENTS_SUBSCRIPTION = gql`
  subscription somethingChanged {
    somethingChanged {
      id
    }
  }
`;

const UsersList = () => {
   const { data, loading } = useSubscription(COMMENTS_SUBSCRIPTION, {
    shouldResubscribe: true
  });

  console.log("data", data, "loading", loading);

return <p>My component</p>
}

Server setup

index.ts

import { PubSub } from "graphql-subscriptions";
import { ApolloServer, gql } from "apollo-server-hapi";

setTimeout(() => {
  console.log("pubsub trigger");
  pubsub.publish("somethingChanged", {
    somethingChanged: { id: 1, content: "Hello!" }
  });
}, 20 * 1000);

const typeDefs = gql`
  type Query {
    dummy: String
  }

  type Subscription {
    somethingChanged: Result
  }

  type Result {
    id: String
  }
`;

const resolvers = {
  Subscription: {
    somethingChanged: {
      subscribe: () => {
        console.log("Someone subscribed to this event");
        return pubsub.asyncIterator("somethingChanged");
      }
    }
  }
};

const serverGQL = new ApolloServer({
    typeDefs,
    resolvers,
    subscriptions: {
      onConnect: connectionParams =>
        console.log("CLIENT CONNECTED", connectionParams)
    }
  });

// Non relevant Hapi code

More infos

I can see the webscoket connecting to my API in chrome devtools and as I said earlier when I use GraphiQL I can see the log in my server "Someone subscribed to this event".
To finish I can see in XHR that a POST request is made to my API with the subscription content (I guess it's to tell Apollo server someone want to subscribe to this subscription ?)

Chrome devtools

Actual outcome:

I can't get the frontend to subscribe to the somethingChanged subscription however we I open graphiql at http://localhost/graphql and I put the exact same content as in COMMENTS_SUBSCRIPTION I can see that everything is working as expected.

How to reproduce the issue:

I've put as much code as I can to be as thorough as possible to explain my problem.

Version

Infos

 System:
    OS: macOS Mojave 10.14.5
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.13.2 - ~/Documents/development/GQLProject/node_modules/.bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Safari: 12.1.1
  npmPackages:
    @apollo/react-hooks: ^3.1.3 => 3.1.3
    apollo-boost: ^0.4.7 => 0.4.7
    apollo-link-ws: ^1.0.19 => 1.0.19

[Antoine-C]

Closed in favor of apollographql/apollo-client#5996