[Network error]: TypeError: Network request failed

Issue

I am trying apollo for the first time. My backend server is Phoenix framework(elixir). and running in http://localhost:4000/api So I tried to do a first query using apollo like this in my code.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import ApolloClient from 'apollo-boost';
import { gql } from 'apollo-boost';
const client = new ApolloClient(
  {
    uri: 'http://localhost:4000/api',
  }
);
client.query({
   query: gql`
     { 
        users {
          name
          email
        } 
     `}
}).then(result => console.log(result));

But I got an error.

[Network error]: TypeError: Network request failed

    node_modules/expo/build/logs/LogSerialization.js:166:14 in _captureConsoleStackTrace
    node_modules/expo/build/logs/LogSerialization.js:41:24 in serializeLogDataAsync
    ... 9 more stack frames from framework internals

[Unhandled promise rejection: Error: Network error: Network request failed]

    http://192.168.1.8:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:124432:28 in new ApolloError
    node_modules/apollo-client/bundle.umd.js:1587:12 in <anonymous>
    node_modules/apollo-client/bundle.umd.js:2007:12 in info.listeners.forEach$argument_0
    <anonymous>:null in Set.forEach
    node_modules/apollo-client/bundle.umd.js:2005:17 in queries.forEach$argument_0
    <anonymous>:null in Map.forEach
    node_modules/apollo-client/bundle.umd.js:2003:11 in QueryManager.prototype.broadcastQueries
    http://192.168.1.8:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:125823:31 in <unknown>
    node_modules/promise/setimmediate/core.js:37:11 in tryCallOne
    node_modules/promise/setimmediate/core.js:123:14 in setImmediate$argument_0

And in my server log said nothing. I think my client doesn't even touch the server. What am I missing? any ideas? :(

Solution

The thing is, that iOS is running in a simulator and Android is running in an emulator.

The localhost is pointing to the environment in which the code is running. The emulator emulates a real device while the simulator is only imitating the device. Therefore the localhost on Android is pointing to the emulated Android device. And not to the machine on which your server is running. The solution is to replace localhost with the IP address of your machine.

Try changing http://localhost:4000 by http://10.0.2.2:4000/

Answered By - Abraham