Graphql-playground: GraphQL Playground Server Cannot Be Reached Running Locally

[tpage99]

This issue pertains to the following package(s):

• [x] GraphQL Playground

What OS and OS version are you experiencing the issue(s) on?

Windows 10

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

2.16.7

What is the expected behavior?

Following How to GraphQL Node tutorial and on Connecting Server and Database with Prisma Bindings.

On step "Accessing both GraphQL APIs inside the same Playground". After running node src/index.js in hackernews-node folder to start and opening separate terminal for graphql playground anticipating being able to work with both GraphQL APIs side-by-side.

What is the actual behavior?

Playground opens up and can access database GraphQL API but app GraphQL API says "Server cannot be reached" and "error": "Failed to fetch schema. Please check your connection" Terminal has no errors and says I'm running locally on 4000 for app and playground on localhost 3000/playground.

What steps may we take to reproduce the behavior?

Run node project locally and then GraphQL playground. I've uploaded my current code to my repositories under GraphQL-Node.

_Please provide a gif or image of the issue for a quicker response/fix._

[baninaveen]

I am getting same issue

[joanprimpratrec2]

Ok, in my case, I just read the chrome developer console and it was an error with CORS, I had in .env the front end url running on a different port than the actual port.

[DarkEye123]

@joanprimpratrec2 thank you! almost same for me

for newcomers -> check your server.start() method and add playground into that.

in my case
process.env.PLAYGROUND_URL === "http://localhost:3000"

server.start(
  {
    cors: { credentials: true, origin: [process.env.FRONTEND_URL, process.env.BACKED_URL, process.env.PLAYGROUND_URL] },
  }, ....
);

[luillyfe]

Also examine carefully your apollo config. It turns out in my case I was missing an import to my API (datasource)

[BengBu-YueZhang]

I am also

[michaelkargl]

Just as I am having the same issue, did you ever find out what the problem was?

[adampwright]

Same issue

[WSINTRA]

I was having a similar error when using graphQL playground after following the howtographql tutorial. In the end it was trivial.
If I used localhost:4000 in my browser I got Server cannot be reached in the playground,
the playground was also giving me strange errors when I tried using an Authorization headers,
"error": "Unexpected token < in JSON at position 0"
or another one was,
Failed to execute 'fetch' on 'Window': Value is not a valid ByteString
I say its trivial because when I tried using the localhost ip in the browser 127.0.0.1:4000
it worked without a hitch.

[hannahatwork]

@WSINTRA your solution worked for me — thanks for sharing. seems like a bug; should it be reported separately?

[siminmaleki]

@WSINTRA
hey, I'm having the same problem. I tried to change the port from 4000 to something else. Also tried using 127.0.0.1 instead of localhost ... but none of them worked for me and I still receive the same error for different URLs :
error": "Failed to execute 'fetch' on 'Window': Failed to parse URL from http://localhost: 4000/graphql"

[Dannymx]

Using 127.0.0.1 worked for me, but still an issue with localhost.

[Praveen82]

Facing same issue
http://localhost:8080/graphql

Server cannot be reached

{
"error": "Failed to fetch schema. Please check your connection"
}

Can someone please help.

[mohamedsahel]

same issue .. :(

[fredele20]

I have similar problem using golang, please I need your help.

[Darthmaul]

I have discovered I can receive this error when my schema.graphql has an error in it. One more thing to validate when checking this bug :)

[ddebrunner]

It's failing for my situation accessing localhost because the Host header I set in HTTP Headers is being overwritten when the HTTP request is made.

Other headers I set are getting though, but at least the Host header is being overridden, the server receives Host: localhost:8080 rather than Host: www.example.com.

Using 1.8.10 IDE.

[micksp]

In my case the mistake was clear in the server logging. Entries like [2020-08-09 09:38:36] local.ERROR: Type User not found. gave me an indication where to look. The message in de playground 'server cannot be reached' however puts you on the wrong track.

[chocodamo]

This has been open since 2018, wow. Anyhow, this might work to anyone with a similar issue...

I'm assuming a lot here, but based on your first screenshot, at the bottom you have an __authentication_ token_, which probably was created dynamically (based on a login, perhaps), so the server is trying to sign in with an old token, if it so... well, there is the problem, just remove it, go fetch a fresh one, then type it back. Now you should be online and able to query.
Had a similar problem today.

[m2paulc]

I too have the same issue.
"server cannot be reached"
"error": "Unexpected token < in JSON at position 0"

What worked for me is replacing localhost with 127.0.0.1 and finally got a connection. Don't forget to include the port number as well as the target url. ex: http://127.0.0.1:3000/graphql

[sudeshdws]

Use this dependency combination below in your pom file then you will not get any error :

            <dependency> 
        <groupId>com.graphql-java-kickstart</groupId>
        <artifactId>graphql-spring-boot-starter</artifactId>
        <version>5.10.0</version>
    </dependency>

    <dependency>
        <groupId>com.graphql-java-kickstart</groupId>
        <artifactId>playground-spring-boot-starter</artifactId>
        <version>5.10.0</version>
    </dependency>

[pratimagautam977]

@tpage99 The URL you have entered is missing a colon after the localhost with the target URL. Hope it helps!