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)

[ghost]

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>

[DivekJohns]

in my case i had given PARSE_SERVER_GRAPHQL_PATH=graphql instead of PARSE_SERVER_GRAPHQL_PATH=/graphql and an missing slash spoiled my day

[DeanHarber]

Posting to maybe save other people some time. Another piece of software was listening on port 4000 on my machine. 🤦

[Neelaka-Rupun]

This issue is related with the server listing port. make sure that the server listing port is same in the playground listening port .

[dongorous]

Tried all all solutions above but still not working on windows

[Neelaka-Rupun]

@dongorous your sever listing port and the playground port same ?

[HudsonSchumaker]

I am having this issue. is this related to the CORS or not?

[HudsonSchumaker]

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>

Used both and still not working. Used the latest version 11.1.0

[devmnj]

tried cors but no effect

[HudsonSchumaker]

tried cors but no effect

I just gave up and started to use postman and is working

[devmnj]

I found a solution for Nextjs , here is the gits link, may be it work for you, it work for me. https://gist.github.com/manojap/9ce06efffec89aa47bac962c7d11ef75

[devmnj]

I added a gists that may help you MANOJ AP GitHub https://github.com/manojap

On Mon, Jul 26, 2021 at 6:11 PM Hudson Luiz Sales Schumaker < @.***> wrote:

tried cors but no effect

I just gave up and started to postman and is working

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/graphql/graphql-playground/issues/877#issuecomment-886667831, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG3OEANWHQGGC4HOGOMKVQDTZVJYNANCNFSM4GANJDTA .

[hanhaiszw]

Same issue, tried cors but no effect

[SuperCipher]

Make sure you have http:// in front of your domain name as well.

[acao]

Closing this, as it is a very obtuse support issue and seems to be causing confusion. These issues might be caused by:

• not handling CORS preflight requests in the server properly, which are required for cross origin POST
• your server not starting or failing to handle graphql requests
• incorrect server url
• an issue with the oss server library or framework‘s implementation of playground

We will be introducing a schema validation feature which will make a very small dent in these cases, and which will surface error payloads from your server finally!

if you have other support issues you can join our discord! https://discord.gg/HWRgmEF8Q5

[acao]

@manojap that seems to be related to the apollo graphql playground which is a fork of this repository, we do not support the apollo fork sorry!

[rahulChefkart]

Having the same issue on MacOS.

[akinncar]

For me I had some problems with my mutations declaration, I recommend you to try to run your graphql on some other platform like insomnia to find the problem.

[dmathewwws]

I was running into this same problem, and using Apollo server where on production I would get the error.

Followed the advice on https://github.com/graphql/graphql-playground/issues/876 and set introspection:true and it worked great. (its defaulted to False when NODE_ENV is production for Apollo Server)

[wanjuntham]

Just to keep a note for future self and others

When NODE_ENV is set to production, the boolean value of playground and introspection will be set to false.

Please make sure these values are set to true explicitly.

[RezaHabibi1001]

you should check your URL , if it is written correct or wrong

[jiapei100]

Is there a conclusion for this issue??? Thanks ...

[jiapei100]

I found a solution for Nextjs , here is the gits link, may be it work for you, it work for me. https://gist.github.com/manojap/9ce06efffec89aa47bac962c7d11ef75

Gone????

[sheikx1221]

I was using nestJs and added cors true in graphql forRoot options but that didn't worked out and after 2-3 refresh the playground could no longer connect with GraphQL API

Then I added the following code into main.ts where you bootstrap your Nest application const app = await NestFactory.create(AppModule, { cors: { credentials: true, origin: ['http://localhost:3000'] }});

This solved the issue and now the playground can connect with the GraphQL API

[Nditah]

None of the suggested solutions works for me. I using @nestjs

[shonmorgun]

Set crossOriginEmbedderPolicy in helmet properties to false will fix this problem. Like so:

server.use(helmet({
    crossOriginEmbedderPolicy: false
}));

[SOMONSOUM]

Just to keep a note for future self and others

When NODE_ENV is set to production, the boolean value of playground and introspection will be set to false.

Please make sure these values are set to true explicitly.

This solution will work for those who use Apollo Server V3

[shadab14meb346]

For me, I was running graphql using serverless offline and due to the node version being not less than 15 I was getting not able to connect to the server error. Here's the detailed discussion about it

[JOSEPHOMOTOSHO]

GraphQLModule.forRoot({ autoSchemaFile: schema.gql, driver: ApolloDriver, playground: true, endpoint:"/graphql", introspection:true }),

adding instropection:true did it for me