Cannot connect from expo app to the websocket server

Please provide the following:

  1. SDK Version: 40
  2. Platforms(Android/iOS/web/all): Android emulator

So I am trying to implement apollo client with my expo app where I am trying to connect to a websocket address (which works in graphiql dev tool).

This is my code:

import { ApolloClient } from 'apollo-client';
import { split, ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { onError } from 'apollo-link-error';
import { getMainDefinition } from 'apollo-utilities';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import * as SecureStore from 'expo-secure-store';
import unfetch from 'unfetch';
import Websocket from 'isomorphic-ws';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import getEnvVars from '../environment';

const myClient = new SubscriptionClient(`ws://0.0.0.0:3003/graphql`, {
  // reconnect: true,
});
myClient.onConnected(e => {
  console.log('onConnected', e);
});
myClient.onReconnected(e => {
  console.log('reconnected', e);
});
myClient.onDisconnected(e => {
  console.log('onDisconnected', e);
});
myClient.onError(e => {
  console.log('onError', e);
});

const wsLink = new WebSocketLink(myClient);
const envVars = getEnvVars();
const apolloServerHost = `${envVars.serverHost}/graphql`;
let httpLink = new HttpLink({
  uri: apolloServerHost,
  fetch: unfetch,
});

/* const wsLink = new WebSocketLink({
  uri: `ws://0.0.0.0:3003/graphql`,
  options: {
    reconnect: true,
    lazy: true,
  },
  webSocketImpl: Websocket,
}); */
const authLink = setContext(async () => {
  const token = await SecureStore.getItemAsync('userToken');
  return {
    headers: {
      Authorization: token,
    },
  };
});

httpLink = authLink.concat(httpLink);

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

const apolloClient = new ApolloClient({
  // By default, this client will send queries to the
  //  `/graphql` endpoint on the same host
  // Pass the configuration option { uri: YOUR_GRAPHQL_API_URL } to the `HttpLink` to connect
  // to a different host
  // link,
  link,
  cache: new InMemoryCache(),
  resolvers: {},
});

export default apolloClient;

When I try to connect I get:
onError Event {
“isTrusted”: false,
“message”: “Failed to connect to /0.0.0.0:3003”,
}

I am using react native debugger version 0.11

I am totally clueless where the problem can be I went through all of the questions but I am totally not sure.

Can it be the cors issue or that somehow the emulator network is blocking the request? The queries and mutations work normally.


If you look in the documentation of { SubscriptionClient } → subscriptions-transport-ws this states that it is for Client (browser) that’s probably why it works in graphiql dev tool but not on simulator / device?

So to connect to the server you need to use Websocket → isomorphic-ws and follow the documentation on how to implement:

const WebSocket = require('isomorphic-ws');

const ws = new WebSocket('wss://echo.websocket.org/');

ws.onopen = function open() {
  console.log('connected');
  ws.send(Date.now());
};

ws.onclose = function close() {
  console.log('disconnected');
};

ws.onmessage = function incoming(data) {
  console.log(`Roundtrip time: ${Date.now() - data.data} ms`);

  setTimeout(function timeout() {
    ws.send(Date.now());
  }, 500);
};