React Native Apollo error: "Network error: Network request failed"

Question

On IOS, the application runs correctly. But on Android I get this error. Here's my config in client and server. Please help!

Error: Error image

Here's the config on client:

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws';

const networkInterface = createNetworkInterface({ uri: 'http://localhost:3000/graphql' });

const wsClient = new SubscriptionClient('ws://localhost:3000/subscriptions', {
  reconnect: true,
});

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient,
);

export const client = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions,
});

Here's the config on server:

import express from 'express';
import {
  graphqlExpress,
  graphiqlExpress,
} from 'graphql-server-express';
import bodyParser from 'body-parser';
import cors from 'cors';
import { execute, subscribe } from 'graphql';
import { createServer } from 'http';
import { SubscriptionServer } from 'subscriptions-transport-ws';
import { schema } from './schema';

const PORT = 3000;
const server = express();

server.use('*', cors({ origin: 'http://localhost:8081' }));
server.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));
server.use('/graphiql', graphiqlExpress({
  endpointURL: '/graphql',
  subscriptionsEndpoint: 'ws://localhost:3000/subscriptions',
}));

// We wrap the express server so that we can attach the WebSocket for subscriptions
const ws = createServer(server);
ws.listen(PORT, () => {
  console.log('GraphQL Server is running');
  // Set up the WebSocket for handling GraphQL subscriptions
  new SubscriptionServer({
    execute,
    subscribe,
    schema
  }, {
    server: ws,
    path: '/subscriptions',
  });
});

I'm using react-apollo: 1.4.10, apollo-client: 1.9.0-0

Solution 1

Basically, you have to replace lochalhost with your machine's IP address. The issue was reporeted here, https://github.com/apollographql/apollo-client/issues/1757

To check your IP address, refer to this video https://www.youtube.com/watch?v=TRFtQzx0Y0M

Solution 2

I had the same problem and I found my solution here https://github.com/apollographql/apollo-client/issues/1757

Basically you need to use your computer's ip-address in the createNetworkInterface function, so change this:

const networkInterface = createNetworkInterface({ uri: 'http://localhost:3000/graphql' });

to this:

const networkInterface = createNetworkInterface({ uri: 'http://YOURIPADDRESS:3000/graphql' });

Solution 3

Since I was working on a simulator, changing localhost to 127.0.0.1 worked for me:

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

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

Comments

[linhnh]

I tried to set ip address, it's working on real device. But on android emulator, it's not working.

[Yellowhill]

Aah yeah, sorry I forgot to mention that I was using a real device.

[Nay]

Yes, actual machine local ip address must be used instead of localhost or 127.0.0.1