Graphql subscription in playground during local development throwing "Could not connect to websocket endpoint" in basic nestjs project

Question

This is happening on a simple project during local development, so cloud infrastructure isn't an issue.

This is also happening in the application playground.

My module registration:

    GraphQLModule.forRootAsync<ApolloDriverConfig>({
      driver: ApolloDriver,
      imports: [YeoConfigModule],
      useFactory: (configService: YeoConfigService<AppConfig>) => {
        const config: ApolloDriverConfig = {
          debug: true,
          subscriptions: {
            'graphql-ws': true,
          },
          playground: true,
          autoSchemaFile: './apps/event-service/schema.gql',
          sortSchema: true,
          context: ({ req, res }) => ({ req, res }),
        };
        const origins = configService.get('CORS_ORIGINS')();
        config.cors = { origin: origins, credentials: true };
        //    config.path = '/apis/event-service/graphql';
        return config;
      },
      inject: [YeoConfigService],

My app startup:

async function bootstrap(): Promise<void> {
  const app = await getApp();
  await app.listen(process.env.PORT ?? 3600);
}

bootstrap();

My versions:

    "graphql-ws": "5.11.2",
    "graphql-redis-subscriptions": "2.5.0"
    "@apollo/gateway": "2.1.3",
    "@nestjs/graphql": "10.1.3",
    "graphql": "16.5.0",

Result:

{
  "error": "Could not connect to websocket endpoint ws://localhost:3600/graphql. Please check if the endpoint url is correct."
}

Any ideas why this isn't working as expected? I've been reading the nestjs docs up at https://docs.nestjs.com/graphql/subscriptions but there's nothing that I can find about extra setup required other than adding

          subscriptions: {
            'graphql-ws': true,
          },

when registering the graphql module.

Answer 1

For anyone else stumbling upon this, I have started using altair which allows me to specify the ws endpoint as well as the type of connection, among which there is a graphql-ws option.

So I went with it.

If anyone knows how to achieve this using the playground referred in the original answer, happy to mark that one as the right answer over my own.