GraphQl Subscription error: Could not connect to websocket endpoint ws://localhost:5000/graphql

Question

Hello I am learning how to implement subscriptions in GraphQl, but trying to test it I am facing the following issue:

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

This is the code I have followed from a tutorial, I guess something is missing but I can not figured out.

import express from "express";
import { ApolloServer, PubSub } from "apollo-server-express";
import { resolvers } from "./data/resolvers.graphql";
import { typeDefs } from "./data/schema.graphql";
import { PORT } from "./config/config";

const pubsub = new PubSub();

/**
 * Create an Apollo server instance.
 */
const server = new ApolloServer({ typeDefs, 
                                  resolvers, 
                                  context: ({ req, res }) => ({ req, res, pubsub }) });

/**
 * Create an express server and apply the Apollo Server middleware
 */
const app = express();
server.applyMiddleware({ app });

app.listen({ port: PORT }, () => {
  console.log(
    `Server is running at http://localhost:${PORT}${server.graphqlPath}`
  );
  console.log(`🚀 Subscriptions ready at ws://localhost:${PORT}${server.subscriptionsPath}`);
});

Answer 1

Please check this documentation ( document link ) or compare blow codes with your codes.

import { ApolloServer } from 'apollo-server-express';
import { createServer } from 'http';
import express from 'express';
import { ApolloServerPluginDrainHttpServer } from 'apollo-server-core';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { WebSocketServer } from 'ws';
import { useServer } from 'graphql-ws/lib/use/ws';
import resolvers from './resolvers';
import typeDefs from './typeDefs';

// Create the schema, which will be used separately by ApolloServer and
// the WebSocket server.
const schema = makeExecutableSchema({ typeDefs, resolvers });

// Create an Express app and HTTP server; we will attach both the WebSocket
// server and the ApolloServer to this HTTP server.
const app = express();
const httpServer = createServer(app);

// Create our WebSocket server using the HTTP server we just set up.
const wsServer = new WebSocketServer({
  server: httpServer,
  path: '/graphql',
});

// Save the returned server's info so we can shutdown this server later
const serverCleanup = useServer({ schema }, wsServer);

// Set up ApolloServer.
const server = new ApolloServer({
  schema,
  csrfPrevention: true,
  cache: 'bounded',
  plugins: [
    // Proper shutdown for the HTTP server.
    ApolloServerPluginDrainHttpServer({ httpServer }),

    // Proper shutdown for the WebSocket server.
    {
      async serverWillStart() {
        return {
          async drainServer() {
            await serverCleanup.dispose();
          },
        };
      },
    },

    ApolloServerPluginLandingPageLocalDefault({ embed: true }),
  ],
});

await server.start();
server.applyMiddleware({ app });

const PORT = 4000;
// Now that our HTTP server is fully set up, we can listen to it.
httpServer.listen(PORT, () => {
  console.log(
    `Server is now running on http://localhost:${PORT}${server.graphqlPath}`,
  );
});