Upgrade to graphql 16.6.0

backend/package.json

@@ -11,16 +11,20 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "graphql-yoga": "^1.17.4"
+    "graphql": "^16.6.0",
+    "graphql-ws": "^5.11.2",
+    "graphql-yoga": "^3.1.1",
+    "ws": "^8.11.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.6",
-    "@babel/node": "^7.8.7",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
-    "@babel/plugin-transform-arrow-functions": "^7.8.3",
-    "@babel/preset-env": "^7.9.6",
-    "nodemon": "^2.0.4"
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.5",
+    "@babel/node": "^7.20.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
+    "@babel/plugin-transform-arrow-functions": "^7.18.6",
+    "@babel/preset-env": "^7.20.2",
+    "nodemon": "^2.0.20",
+    "uuidv4": "^6.2.13"
   }
 }

backend/src/index.js

@@ -1,4 +1,8 @@
-import { GraphQLServer, PubSub } from 'graphql-yoga';
+import { createPubSub, createSchema, createYoga } from 'graphql-yoga'
+import { createServer } from 'node:http'
+import { useServer } from 'graphql-ws/lib/use/ws'
+import { WebSocketServer } from 'ws'
+import * as fs from 'fs'
 import db from './db';
 import Query from './resolvers/Query';
 import Mutation from './resolvers/Mutation';
@@ -7,24 +11,74 @@ import User from './resolvers/User';
 import Post from './resolvers/Post';
 import Comment from './resolvers/Comment';
 
-const pubsub = new PubSub();
-
-const server = new GraphQLServer({
-  typeDefs: './src/schema.graphql',
-  resolvers: {
-    Query,
-    Mutation,
-    Subscription,
-    User,
-    Post,
-    Comment,
-  },
+const pubsub = createPubSub();
+
+const yoga = createYoga({
+  schema: createSchema({
+    typeDefs: fs.readFileSync(
+      './src/schema.graphql',
+      'utf-8'
+    ),
+    resolvers: {
+      Query,
+      Mutation,
+      Subscription,
+      User,
+      Post,
+      Comment,
+    },
+  }),
   context: {
     db,
     pubsub,
   },
+  //  graphqlEndpoint: '/',   // uncomment this to send the app to: 4000/
+  graphiql: {
+    subscriptionsProtocol: 'WS',
+  },
 });
 
-server.start({ port: process.env.PORT | 5000 }, () => {
-  console.log(`The server is up on port ${process.env.PORT | 5000}!`);
+const server = createServer(yoga)
+
+const wsServer = new WebSocketServer({
+  server: server,
+  path: yoga.graphqlEndpoint,
+})
+
+useServer(
+  {
+    execute: (args) => args.rootValue.execute(args),
+    subscribe: (args) => args.rootValue.subscribe(args),
+    onSubscribe: async (ctx, msg) => {
+      const { schema, execute, subscribe, contextFactory, parse, validate } =
+        yoga.getEnveloped({
+          ...ctx,
+          req: ctx.extra.request,
+          socket: ctx.extra.socket,
+          params: msg.payload
+        })
+
+      const args = {
+        schema,
+        operationName: msg.payload.operationName,
+        document: parse(msg.payload.query),
+        variableValues: msg.payload.variables,
+        contextValue: await contextFactory(),
+        rootValue: {
+          execute,
+          subscribe
+        }
+      }
+
+      const errors = validate(args.schema, args.document)
+      if (errors.length) return errors
+      return args
+    },
+  },
+  wsServer,
+)
+
+const port = process.env.PORT || 4000;
+server.listen({port}, () => {
+  console.log(`The server is up on port ${port}!`);
 });

backend/src/resolvers/Mutation.js

@@ -1,4 +1,4 @@
-import uuidv4 from 'uuid/v4';
+import {v4 as uuidv4} from 'uuid';
 
 const Mutation = {
   createUser(parent, args, { db }, info) {

backend/src/resolvers/Subscription.js

@@ -9,12 +9,12 @@ const Subscription = {
         throw new Error('Post not found');
       }
 
-      return pubsub.asyncIterator(`comment ${postId}`);
+      return pubsub.subscribe(`comment ${postId}`);
     },
   },
   post: {
     subscribe(parent, args, { pubsub }, info) {
-      return pubsub.asyncIterator('post');
+      return pubsub.subscribe('post');
     },
   },
 };