Subscription not working in React Native?

Question

I need to integrate subscription in my ReactNative app. The subscription works fine on localhost in graphiql. I have deployed my backend on Heroku. I am using apollo-server and not hasura. My subscriptions are not working for the url given by Heroku but it works fine on localhost. Queries and mutations work fine for both localhost and Heroku url. So I am trying to access my subscription from my ReactNative client. I have kept the base url as my local host. The queries and mutations part works for my ReactNative client but my subscription part is not working.

I have configured my Apollo client for subscription by adding this

const httpLink = createHttpLink({
  uri: 'http://localhost:5000',
});

const wsLink = new WebSocketLink({
  uri: `ws://localhost:5000`,
  options: {
    reconnect: true,
    connectionParams: {
      // headers: {
      //   Authorization: `Bearer ${token}`,
      // },
    },
  },
});

const authLink = setContext(async (req, {headers}) => {
  try {
    const token = await AsyncStorage.getItem('token');
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : '',
      },
    };
  } catch (e) {
    console.log(e);
  }
});

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

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

Here is my useSubscription hook

const {data, error, loading} = useSubscription(
    HEALTH_CONSULTATION_SUBSCRIPTION,
  );

I am neither getting error nor data. I am triggering the subscription from Graphiql

is the url you are triyng to connect wss or https? If it is a domain and not a localhost you have to add a secure transport exception for ios and android:https://stackoverflow.com/questions/30731785/how-do-i-load-an-http-url-with-app-transport-security-enabled-in-ios-9 — Daniel Dimitrov, Jun 16 '20 at 10:37
@DanielDimitrov I have added it for iOS in info plist file. I have tried on https as well as localhost but does not work. I tried replacing https with ws , still it won't work. Also its ws and not was. Also my mutation and query are working so its not a transport issue — BraveEvidence, Jun 16 '20 at 14:56
Where are you looking? Do you see the request dispatching in the network inspect? Do you get a response? Maybe remove the try/catch block and see if you'll get an error. — Daniel Dimitrov, Jun 17 '20 at 09:46

score 2 · Accepted Answer · answered Jun 18 '20 at 12:28

2

So there was no problem from my React Native Code. The issue was with the free tier of Heroku I am using. I tried replacing my subscription with Hasura's Subscription https://hasura.io/learn/graphql/graphiql?tutorial=react-native and it works.

answered Jun 18 '20 at 12:28

BraveEvidence

53
11
45
119

Subscription not working in React Native?

1 Answers1