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.

score 2 · Accepted Answer · answered Jan 24 '23 at 12:41

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.

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

1 Answers1