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:stackoverflow.com/questions/30731785/… — Daniel Dimitrov
– Daniel Dimitrov, Commented Jun 16, 2020 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
– BraveEvidence, Commented Jun 16, 2020 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
– Daniel Dimitrov, Commented Jun 17, 2020 at 9:46

BraveEvidence · Accepted Answer · 2020-06-18 12:28:41Z

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, 2020 at 12:28

BraveEvidence

6516 gold badges64 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Subscription not working in React Native?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related