Apollo-client: Unable to connect to local GraphQL Server running at localhost:PORT

[akashbdj]

I'm trying to connect to GraphQL server running at http://MY_MACHINE_IP:PORT using apollo-client and react-apollo.
I'm using expo to create React Native application and trying to run it on my real device(iOS)
It's working on iOS Simulator, though!

Intended outcome:
It should return proper response I was expecting.

Actual outcome:
Network Error: Network Request Failed.

Version

• react-apollo: "^2.0.1",
• graphql: "^0.11.7",
• graphql-tag: "^2.5.0",
• apollo-client: "^2.0.3",
• expo: "^23.0.0",

Screenshots:

What I'm trying to do:

Error Screenshot:

Please let me know if you need any more information.

Thanks

[michaelknoch]

Have you tried setting Uri to your local Network ip? E.g 192.168....

[akashbdj]

Yes! I already did -- still not working.

[jbaxleyiii]

@akashbdj can you open the network panel and see where the request is trying to go to?

[akashbdj]

Okay. This is completely weird. 😖

When both of my devices(laptop and mobile) are connected to our home wifi, I couldn't even remote debug my application. It keeps on saying, "It is taking too much time than it should". 😣

After a couple of tries, I turned off my wifi and started using phone network(4G) and connected my laptop to it through hotspot.

Now, I can remote debug! Network request were also getting resolved. I was able to see the proper response. 🙄

May I know why is it happening with my WiFi? Anybody else facing the same issue?

[akashbdj]

I ended up using ngrok for development!

[RobertWSaunders]

@akashbdj I too was having this same issue on my home wifi, using ngrok solved it for me! Does anyone have the answer to this though? Seems weird...

[Kisepro]

Same for me.
It's working well on a browser but not on the app

[developdeez]

Same here. Using the latest apollo client 2.1

The only result I get is the Network Error:

import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: "http://localhost:4000/graphql"
});
import gql from "graphql-tag";
client
.query({
query: gql { user{ id name } }
})
.then(result => console.log(result));

[CasperGroenenberg]

Try adding cors on the graphql server:
add this before the graphql endpoints

const cors = require('cors');
app.use(cors())

[mikechambers610]

How does this not work? All my other queries work fine... Not sure why this one doesn't want to...

[pushpankar]

I am also getting the same issue.

[dadyl11]

Ss someone able to share the code after usage of Ngrok? I am not sure what I exactly have to do to make my client App (Apollo) working with the server that is running on the other laptop (Linux).

[kinxiel]

Issue already closed, but just encountered the same issue using Prisma (uses Apollo Server on the inside). What resolved it on my side was to use the host machine's IP address : port on the server (Prisma) in the cors settings and also use the host machine IP : port (front) on the client.

[vprahaladhan]

Same here. Using the latest apollo client 2.1

The only result I get is the Network Error:

import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: "http://localhost:4000/graphql"
});
import gql from "graphql-tag";
client
.query({
query: gql{ user{ id name } }
})
.then(result => console.log(result));

you don't need the '/graphql' in the uri; it has to be "http://localhost:4000"

[gpbaculio]

what worked for me is doing michaelknoch's suggestion, if you are on port 4000, e.g.: http://192.168.56.1:4000/