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/

[omar-dulaimi]

For me neither local IP address nor ngrok worked. So instead of generating an ngrok for the frontend, I generated it for the backend so that it becomes https. Then connected to frontend through local IP. Now everything works well. Hope this helps someone, or me in the near future!

[GoldenMaximo]

In my case, I was using the Brave browser.

"Brave does not support network requests from Studio on HTTPS to your local HTTP endpoint, so we cannot introspect your endpoint.

There are a few solutions:
Turn Shields down in your Brave settings for https://studio.apollographql.com
Visit this page from a browser that supports HTTPS requests to local HTTP endpoints, like Chrome or Firefox.
Set up an SSL certificate for your local endpoint."

[ViktorCoder]

Thanks)