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

Answer 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

Answer 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' });

Answer 3

On an Android device or emulator, 'localhost' and '127.0.0.1' refer to the device or emulator running the app, not the connected/host computer. You can forward the port from the device/emulator to your development machine, and continue to use 'localhost' on your device.

For example:

# For service running on port 8000
adb reverse tcp:8000 tcp:8000

The ports don't need to match. This can be useful when running multiple services, or multiple apps.

# To use localhost:8080 in your app, with a service running on 8000
adb reverse tcp:8080 tcp:8000

It might be useful to add the command to run automatically when you install/launch the app

// In your package.json
{
  // ...
  scripts: {
    // "android": "react-native run-android", becomes
    "android": "adb reverse tcp:8000 tcp:8000 ; react-native run-android",
    // ...

Answer 4

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
})

Answer 5

you should check your ipv4 address by using ipconfig in CMD for windows. You will find two ipv4 address, copy the second one. then replace 'localhost' in your graphql url. like this

const LOCAL_SYSTEM_IP_ADDRESS = '192.168.1.6';
const PORT = '3000';
export const Config = {
  GRAPHQL_URL: `http://${LOCAL_SYSTEM_IP_ADDRESS}:${PORT}/graphql`,
};