Apollo-client: React Native Android: Network Request Failed (using localhost)

[joncursi]

Hey there,

I've been working on a React Native app for a while now with great success using Apollo Client. I do most of my debugging during development using the iOS simulator, and check the app on the Android emulator now and again to make sure things are working as intended.

I have configured Apollo Client per the docs (basically just setting the networkInterface and wrapping my app in the ApolloProvider) and it's been working great on iOS. But when I booted up my Android emulator for my weekly check-up on the android side of things, all of my queries and mutations are resulting in:

Network error: Network request failed

My networkInterface is being pointed at: http://localhost:3000/graphql

This works on iOS, but Android can't seem to communicate with it. After changing my network interface to a hosted endpoint (i.e. https://staging.app.com/graphql), it worked. It seems Android can't communicate with localhost by default.

So, two things

1) What can I do to enable communication with localhost during development? Is there something I can add to AndroidManifest.xml?
2) Once we figure it out, this would be a great addition to the docs.

[zackify]

Pretty sure just using the ip address of your computer instead of localhost will fix it. This has nothing to do with react-apollo btw :)

[joncursi]

@zackify thank you! This thread also had relevant information: https://github.com/facebook/react-native/issues/10404

[geirman]

OMG! I could just kick myself...repeatedly! I know this! I know this! I know this! So whyyyyyyy didn't this occur to me hours ago?! Ug!

Thanks for posting this question so I can get back to work.

[pravinraut809]

const api = new Frisbee({
baseURI: 'http://10.0.2.15:9000',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});

help me with this ,,getting network request failed

[matthew-gordon]

So if you are going to use the android emulator, through android studio, using this uri...
http://10.0.2.2:3000/
works for me.. running on expo and through a physical device, need to track down your local ip address
http://${ip.address}:3000/

[jifromz09]

@matthew-gordon - Tried your solution still does not work.

[azeezat]

I had the same issue.
Below is what worked for me

I used this link to get my local IP address https://lifehacker.com/how-to-find-your-local-and-external-ip-address-5833108

import React from 'react';
import RootComponent from './src/RootComponent';
import {ApolloProvider} from '@apollo/react-hooks';
import {ApolloClient} from 'apollo-client';
import {InMemoryCache} from 'apollo-cache-inmemory';
import {createHttpLink} from 'apollo-link-http';

const LOCAL_SYSTEM_IP_ADDRESS = '192.168.178.241';
const PORT = '5000';

const client = new ApolloClient({
  //note: this is the local IP address of the system
  link: createHttpLink({
    uri: `http://${LOCAL_SYSTEM_IP_ADDRESS}:${PORT}/graphql`,
  }),
  cache: new InMemoryCache(),
});

const App = () => {
  return (
    <ApolloProvider client={client}>
      <RootComponent />
    </ApolloProvider>
  );
};

export default App;

[jifromz09]

@azeezat in your local API just replace your IP address with 10.0.0.0/your port number...

[azeezat]

@azeezat in your local API just replace your IP address with 10.0.0.0/your port number...

This didn't work. The solution I posted above is what worked for me

[skjorrface]

Hi guys, I'm having the same exact problem with Expo + React Native + Apollo Client + graphql-yoga-server. I read this issue so I managed to make my graphql endpoint reachable from "the external world" with nat and no-ip. Anyways, from expo server, if I click "Run in Browser", everything works correctly, if I run the app in android emulator or via the expo app on my smartphone I get a network error, with the following error stack:

`Network error: Network request failed

• http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:159227:30 in ApolloError
• node_modules/@apollo/client/apollo-client.cjs.js:681:35 in ObservableQuery.prototype.getCurrentResult
• node_modules/@apollo/client/apollo-client.cjs.js:4957:17 in _this.getQueryResult - node_modules/@apollo/client/apollo-client.cjs.js:5083:24 in - node_modules/@apollo/client/apollo-client.cjs.js:5235:22 in useDeepMemo
• node_modules/@apollo/client/apollo-client.cjs.js:5258:4 in useBaseQuery
• http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:157867:42 in - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:10696:27 in renderWithHooks - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:12842:6 in updateFunctionComponent - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20459:25 in beginWork$$1 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19370:24 in performUnitOfWork
• node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19347:39 in workLoopSync
• node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18997:22 in renderRoot
• [native code]:null in renderRoot - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback * [native code]:null in runRootCallback - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1 - node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:11484:17 in dispatchAction * [native code]:null in dispatchAction - node_modules/@apollo/client/apollo-client.cjs.js:5174:26 in obsQuery.subscribe$argument_0.error - node_modules/zen-observable/lib/Observable.js:139:8 in notifySubscription * http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:165854:23 in onNotify - node_modules/zen-observable/lib/Observable.js:239:11 in error * [native code]:null in forEach - node_modules/@apollo/client/apollo-client.cjs.js:956:4 in iterateObserversSafely * http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:159700:31 in onError - node_modules/@apollo/client/apollo-client.cjs.js:2424:20 in invoke - node_modules/@apollo/client/apollo-client.cjs.js:2785:24 in info.listeners.forEach$argument_0 * [native code]:null in forEach - node_modules/@apollo/client/apollo-client.cjs.js:2783:34 in queries.forEach$argument_0 * [native code]:null in forEach - node_modules/@apollo/client/apollo-client.cjs.js:2781:8 in QueryManager.prototype.broadcastQueries * http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:161498:45 in - node_modules/promise/setimmediate/core.js:37:14 in tryCallOne - node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0 - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates * [native code]:null in callImmediates - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0 - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0 * [native code]:null in flushedQueue * [native code]:null in callFunctionReturnFlushedQueue`