NestJs GraphQL playground access

Question

I can't seem to access the GraphQL Playground using NestJS. I'm exploring the documentation and have followed this https://docs.nestjs.com/graphql/quick-start up to the Resolvers section to generate the schema.gql, but attempting to reach localhost:3000/graphql is not able to connect.

At first I thought my code was setup incorrectly, but I spent some time digging into Nest's examples and found that those also do not work when trying to access the /graphql endpoint. It does work if I setup a get endpoint to return a JSON body using the REST method.

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { RecipesModule } from './recipes/recipes.module';

@Module({
  imports: [
    RecipesModule,
    GraphQLModule.forRoot({
      installSubscriptionHandlers: true,
      autoSchemaFile: 'schema.gql',
    }),
  ],
})
export class AppModule {}

This is directly from the NestJS example. My understanding is that the GraphQLModule should be setting up the connection to the /graphql endpoint. Following the docs, graphql, apollo-server-express, and graphql-tools were all installed.

Any idea why the graphql route is not connecting?

[Edit]: Things I've tried so far:

• setting playground: true explicitly with GraphQLModule.forRoot
• verified NODE_ENV is not 'production'
• confirmed server works when creating resolvers using REST
• curl'd localhost:3000/graphql and receive a graphql validation error, so confirm that connects correctly

Slider

Check what your process.env.NODE_ENV is. If it is PRODUCTION then I think apollo-server disables the playground. If not, try adding playground: true explicitly – Bambi

@JayMcDoniel I should've specified what I've tried already on the post, sorry. I've tried both and unfortunately, wasn't able to connect to the endpoint. I just curl'ed the endpoint to see if it is connecting to graphql and seems like it is since it returns GraphQL validation errors. – Slider

Are you able to provide a reproduction then? Can't see from what you've shared why that would be happening – Bambi

So, I've tried with nest's example in their github repo (github.com/nestjs/nest/tree/master/sample/23-graphql-code-first). It's about as basic as it can get and is essentially the same as the documentation's example. Nothing modified, just unable to connect to gql playground. Same result curling, able to see the gql validation errors, so it's connecting on the server though. – Slider

With that sample, the curl fails, but a browser requests to the same location succeeds. Probably looking at the user agent. It doesn't make much sense to send an interactive playground to the command line – Bambi

Of course, for the command line I was just referring to sending a Post request to run a query, not trying to access the playground. But those requests worked and the queries in the schema were correctly being referenced. Odd that playground was accessible to you but not on my end, will dig a bit more and see if I figure it out. Thanks! – Slider

Answer 1

Seems to be an issue with WSL2 running on Windows 10. This thread on github has some insight into the issue.

Disable Fast Startup to allow access to localhost.

https://github.com/microsoft/WSL/issues/5298

Slider

Answer 2

sometimes helmet causes this same issue. if you have helmet loaded as a middleware, it might probably also cause this.

Baldhead

disabling helmet solves the issue in NestJs, but I'm wondering what causes it? And if that is the problem is that an option to disable helmet in the dev mode? – Sculpture

Helmet was a problem in my case too – Grisette

does anybody know why helmet cause this issue ? – Bostow

Answer 3

I encountered a similar issue this is what I did. I hope you will find it helpful. I appreciated everyone's support.

Step1: // app.module.ts

  imports: [
    UsersModule,
    GraphQLModule.forRoot({
      // autoSchemaFile: true,    did not work!
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      // schema.gql will automatically be created
      debug: true,
      playground: true,
    }),
  ],
  providers: [AppResolver],   // all resolvers & service should be in providers

step 2:

Make sure you have one at least query bcz Mutation is not enough if you don't GraphQL playground will not start. Read more here

Reporter

Answer 4

2 years late but found a simple workaround, since helmet was the issue too.
Conditionally use helmet(), like this:

process.env.CURRENT_ENV === 'dev' && app.use(helmet())

Assuming CURRENT_ENV is a custom environment variable that I use instead of NODE_ENV.

Etui

Answer 5

Removing the dist folder and restarting the app worked for me.

Aristides

Answer 6

Still have the same issue with helmet, I just checked the environment and used it conditionally, and it worked for me:

const isGqlEnvProd = process.env.GQL_ENV === 'prod';
if(isGqlEnvProd){
 app.use(helmet());
}

Submission