React-apollo: [Android] Error: Network error: Network request failed

[symphonicz]

I'm create an example react-native app to use apollo, and connect to https://my.domain.name/graphql, It's work on iOS simulator but when i running on Android Emulator or Android physical device it doesn't works, error is appear like this

Unhandled (in react-apollo) Error: Network error: Network request failed
    at new ApolloError (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:61358:32)
    at ObservableQuery.currentResult (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:61488:29)
    at GraphQL.dataForChild (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:58649:66)
    at GraphQL.render (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:58700:37)
    at finishClassComponent (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:4402:112)
    at updateClassComponent (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:4395:338)
    at beginWork (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:4501:28)
    at performUnitOfWork (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:5412:24)
    at workLoop (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:5431:125)
    at Object._invokeGuardedCallback (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2524:18)

this's my code

const networkInterface = createNetworkInterface({ 
      uri: 'https://my.domain.name/graphql',
      opts: {
        credentials: 'same-origin',
      }
    });

    this.client = new ApolloClient({
      networkInterface
    });

and this query

export default graphql(gql`
    query {
        post(start: 0, offset: 5) {
            id
        }
    }
`)(MainScreen);

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as no recent activyt. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to React Apollo!

[bradserbuddy]

This happens for me as well. For me no auth is involved, and I'm using HttpLink. If you're interested in debugging, let me know, for now I'm using iOS for debugging.

[MacKentoch]

Please re-open the issue!
No recent activity auto close issue just waits less than a month?

I encounter the exact same problem:

• works on iOS simulator
• but same error on android emulator (the one from Android Studio).

In my case, uri is local: uri: 'http:localhost/graphql'

[emmanuelnk]

If you're using the Android Emulator, in your client code, don't use localhost to access graphql. Use the IP address of the emulator host machine which is usually 10.0.2.2
For example my setup for accessing graphql from client:

const networkInterface = createNetworkInterface({ uri: `http://10.0.2.2:8080/graphql` });
const client = new ApolloClient({
    networkInterface,
});

The iOS simulator works _because its a simulator_. It shares the same IP address with the host machine. The emulator runs as a VM that has its own IP address so localhost would resolve to the emulators own IP address.
Ref: react-native/issues/10404

[smithaitufe]

I have been struggling with this issue for about 6 days now. I don't know the cause at all.
The unfortunate thing is that the error is not even detailed.
Researching further, I saw this

I am stuck right now. I didn't experience this why I was using Expo. But I switched back to core React Native because I needed to use some native modules.

Any suggestion will help because my client is on my neck.

@symphonicz Please were you able to resolve this issue?

@emmanuelnk I am not using localhost. http://192.168.43.45:5088/graphql

This error occurs when I upload an image to the server. It is uploaded successfully, but I am not able to get response at the mobile app side

[zhaiduo]

Same error when I try to load http://..../graphql on Android device, but ios no problem.
Could it be a createHttpLink problem without fetchOptions? But I have no idea to handle https from RN client.

[ropaillet]

Same issue while running on Android Device, request just fails with no detail

[ropaillet]

OK, as @smithaitufe said, the "localhost:xxx" port in your Android phone is not the same as that of your computer.

So apollo is making a request in a server that does not exist.

You need to redirect a phone port to "3000" or whataver you are hosting as instructed Here so localhost:"XXXX" (phone) redirects to localhost:"3000" in machine and the request can be succesfull.

[swatistw]

In my case , i am creating server with "https" i.e https://localhost:4000/graphql , so when i accessing server from react-native using apollo it throws error like Network error: Network request failed . It work fine with "http".

[swatistw]

@emmanuelnk i use OpenSSL certificate and key at server side for creating https server.
var privateKey = fs.readFileSync('ca.key', 'utf8');
var certificate = fs.readFileSync('ca.crt', 'utf8');
var credentials = {key: privateKey, cert: certificate};
var httpsServer = https.createServer(credentials,app);
httpsServer.listen(4000);

but at client side i am not able to use https ..can you please help me. i want to use https for server like this https://localhost:4000/graphql

[smithaitufe]

Is there anyone that was able to resolve th is issue?
If yes, can you tell what you did?

[renehauck]

http://yourIp works for me great

[plantryan]

Any luck with this @smithaitufe? I have the same setup, the server receives the request but no response. Only "Network request failed".

[vmurillo]

@plantryan @smithaitufe just in case you are still interested, I was blocked by this issue while uploading an image on android only becasue I was not setting the mime type which is only mandatory on android.

[CyxouD]

thank you @emmanuelnk
If you're using Apollo-boost, then correct place to specify is uri param.
In my case I use it like this:

const client = new ApolloClient<InMemoryCache>({
      ...,
      uri: `http://${
        Platform.OS === 'ios' ? 'localhost' : IP_ADDRESS_OF_YOUR_MACHINE
      }:4000/`,
    });

[cryptedx]

thank you @emmanuelnk
If you're using Apollo-boost, then correct place to specify is uri param.
In my case I use it like this:

const client = new ApolloClient<InMemoryCache>({
      ...,
      uri: `http://${
        Platform.OS === 'ios' ? 'localhost' : IP_ADDRESS_OF_YOUR_MACHINE
      }:4000/`,
    });

This is working for me. Thank you!