Why am i getting the error: server must support graphql-ws or subscriptions-transport-ws protocol in Apollo studio

[CrispenGari]

I just copied and modified the example in the docs, intergrating express, apollo-server and with subscriptions but surprisingly I'm getting an error saying:

server must support graphql-ws or subscriptions-transport-ws protocol

This is happening in the Apollo Studio, where am i wrong. This is the code that i have on the server:

import "reflect-metadata";
import "dotenv/config";
import _ from "node-env-types";
import ip from "ip";
import { ApolloServer } from "@apollo/server";
import { expressMiddleware } from "@apollo/server/express4";
import { ApolloServerPluginDrainHttpServer } from "@apollo/server/plugin/drainHttpServer";
import { createServer } from "http";
import express from "express";
import { WebSocketServer } from "ws";
import { useServer } from "graphql-ws/lib/use/ws";
import { json } from "body-parser";
import cors from "cors";
import { Resolvers } from "./resolvers";
import { buildSchema } from "type-graphql";

_();
const PORT: any = process.env.PORT || 3001;

(async () => {
  const app = express();
  const httpServer = createServer(app);
  const schema = await buildSchema({
    resolvers: [...Resolvers] as any,
    validate: false,
  });

  const wsServer = new WebSocketServer({
    server: httpServer,
    path: "/graphql",
  });

  const serverCleanup = useServer({ schema }, wsServer);
  const server = new ApolloServer({
    schema,
    plugins: [
      ApolloServerPluginDrainHttpServer({ httpServer }),
      {
        async serverWillStart() {
          return {
            async drainServer() {
              await serverCleanup.dispose();
            },
          };
        },
      },
    ],
  });
  await server.start();

  app.use(
    "/graphql",
    cors<cors.CorsRequest>({
      origin: ["*", "https://studio.apollographql.com"],
    }),
    json(),
    expressMiddleware(server)
  );
  httpServer.listen(PORT, () => {
    console.log();
    console.log(`\t Local: http:127.0.0.1:${PORT}$/graphql`);
    console.log(`\t Network: http:${ip.address()}:${PORT}/graphql`);
    console.log();
    console.log(`Server is now running on http://localhost:${PORT}/graphql`);
  });
})();

[trevor-scheer]

I can't reproduce (using the runnable example here: https://www.apollographql.com/docs/apollo-server/data/subscriptions#basic-runnable-example) and it's not obvious to me where your implementation is different. Can you share a full reproduction that I can run locally?

[Gabrieltrinidad0101]

This code run good

import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@apollo/server/express4';
import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer';
import { createServer } from 'http';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { WebSocketServer } from 'ws';
import { useServer } from 'graphql-ws/lib/use/ws';
import { PubSub } from 'graphql-subscriptions';
import { gql } from 'graphql-tag';
import express from 'express';
import bodyParser from 'body-parser';
import cors from 'cors';

async function startServer() {

const typeDefs = gql`
  type UserStatus {
    userId: String!
    isOnline: Boolean!
  }

  type Query {
    userStatus: UserStatus!
  }

  type Subscription {
    userStatusUpdated: UserStatus!
  }
`;
const pubsub = new PubSub();
const resolvers = {
  Query: {
    userStatus() {
      return userStatus;
    },
  },
  Subscription: {
    userStatusUpdated: {
      subscribe: () => pubsub.asyncIterator(['USER_STATUS_UPDATED']),
    },
  },
};
const schema = makeExecutableSchema({ typeDefs, resolvers });


const app = express();
const httpServer = createServer(app);
const wsServer = new WebSocketServer({
  server: httpServer,
  path: '/',
});
const serverCleanup = useServer({ schema }, wsServer);
const server = new ApolloServer({
  schema,
  plugins: [
    ApolloServerPluginDrainHttpServer({ httpServer }),
    {
      async serverWillStart() {
        return {
          async drainServer() {
            await serverCleanup.dispose();
          },
        };
      },
    },
  ],
});

await server.start();
app.use('/', cors(), bodyParser.json(), expressMiddleware(server));


const PORT = 4000;
httpServer.listen(PORT, () => {
  console.log(`🚀 GraphQL Server ready at http://localhost:${PORT}/`);
  console.log(`🚀 GraphQL WS ready at ws://localhost:${PORT}/`);
});


let userStatus = {
  userId: "ceqak08y3sjkbasdfausjg",
  isOnline: true
};
function toggleUserStatus() {
  userStatus.isOnline = !userStatus.isOnline;
  pubsub.publish('USER_STATUS_UPDATED', { userStatusUpdated: userStatus });
  setTimeout(toggleUserStatus, 5000);
}
toggleUserStatus()

}

startServer()