Subscriptions-transport-ws: WebSocketLink not working for React Native

[yuxiaoma]

Tried to use subscriptions in React Native.
My backend is fully working and I followed the guide from Apollo to setup the client side: https://www.apollographql.com/docs/react/advanced/subscriptions.html

import { split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';

// Create an http link:
const httpLink = new HttpLink({
  uri: 'http://127.0.0.1:3000/graphql'
});

// Create a WebSocket link:
const wsLink = new WebSocketLink({
  uri: `ws://127.0.0.1:3000/graphql/subscriptions`,
  options: {
    reconnect: true
  }
});

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === 'OperationDefinition' && operation === 'subscription';
  },
  wsLink,
  httpLink,
);

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

export default client;

However, nothing fires when doing subscription queries, no errors, no network traffic, monitored from both apollo link and graphql, no error from anywhere. This is happening for both on iOS and Android (simulators and devices).
I can clearly see the subscription query is passed through the link split and landed at the wsLink, but nothing happens afterwards.
Tried onError link from 'apollo-link-error', not producing anything.

Also tried this approach with SubscriptionClient, the same problem remains.

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

const wsClient = new SubscriptionClient(
  `ws://127.0.0.1:3000/device/api/graphql/subscriptions`,
    {
      reconnect: true,
    }
 );
const wsLink = new WebSocketLink(wsClient);

const link = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === 'OperationDefinition' && operation === 'subscription';
  },
  wsLink,
  httpLink,
);

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

export default client;

Is anyone experiencing the same problem?

Version
apollo-cache-inmemory@^1.1.1
apollo-client@^2.0.3
apollo-link@^1.0.3, apollo-link@^1.2.2
apollo-link-ws@^1.0.8
subscriptions-transport-ws@^0.9.14

[venkatesh-rao]

@yuxiaoma have you solved this problem..if so please share

[SERAGORN]

@yuxiaoma same problem

[voxmatt]

@yuxiaoma any updates here?

[lprhodes]

@yuxiaoma seeing the same thing, can you describe how you solved this please?

[Bram-Zijp]

@yuxiaoma @venkatesh-rao @SERAGORN @voxmatt @lprhodes
For those looking for a solution:

I found that when I removed the reconnect: true option, it started working. Losing the reconnect functionality is not something acceptable to me. After fiddling around I found that adding the option lazy: true (in the same object as reconnect:true) fixed the problem. If i'm not mistaken, lazy: true will only connect to ones GraphQL API (via an WebSocket) after an subscription is initialized. To me this is acceptable.

Perhaps the underlying issue is that it tries to reconnect while not required during the apps initialization.

[voxmatt]

@Bram-Zijp thanks for the update. Will try.

[kwoxer]

Does not work for me the lazy "hack".

[kirantripathi]

@kwoxer @Bram-Zijp I tested it 2-3 time and it worked for me when I remove reconnect:true.adding lazy:true, didn't help me. so I went with removing the reconnect:true option.
any idea on how can I solve this without removing reconnect:true , or won't there be any problem if I remove it.

[filozof6]

I am facing the same problem nad removing reconnect: true did not solve it

do you guys have any suggestion to at least debug this?

I dont even see that there is any ws connection in react native debugger

[KelvinMitaki]

@filozof6 facing the same issue