NestJs GraphQL playground access

0
votes

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
2
node.jsgraphqlnestjs
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 – Jay McDoniel
@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. – Elbert Bae
Are you able to provide a reproduction then? Can't see from what you've shared why that would be happening – Jay McDoniel
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. – Elbert Bae
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 – Jay McDoniel

2 Answers

0
votes

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

0
votes

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