fix: Vue CLI UI graphql subscription server error

Fixes #7221

`subscriptions-transport-ws` is also deprecated, we need to move to
`graphql-ws` one day.
But better deprecatedthan broken.

packages/@vue/cli-ui/graphql-server.js

@@ -8,6 +8,10 @@ const { ApolloServer, gql } = require('apollo-server-express')
 const { PubSub } = require('graphql-subscriptions')
 const merge = require('deepmerge')
 
+const { SubscriptionServer } = require('subscriptions-transport-ws')
+const { makeExecutableSchema } = require('@graphql-tools/schema')
+const { execute, subscribe } = require('graphql')
+
 function defaultValue (provided, value) {
   return provided == null ? value : provided
 }
@@ -27,6 +31,7 @@ module.exports = async (options, cb = null) => {
 
   // Express app
   const app = express()
+  const httpServer = http.createServer(app)
 
   // Customize those files
   let typeDefs = load(options.paths.typeDefs)
@@ -64,12 +69,16 @@ module.exports = async (options, cb = null) => {
 
   typeDefs = processSchema(typeDefs)
 
+  // eslint-disable-next-line prefer-const
+  let subscriptionServer
+
   let apolloServerOptions = {
     typeDefs,
     resolvers,
     schemaDirectives,
     dataSources,
     tracing: true,
+    cache: 'bounded',
     cacheControl: true,
     engine: !options.integratedEngine,
     // Resolvers context from POST
@@ -89,23 +98,15 @@ module.exports = async (options, cb = null) => {
       return contextData
     },
     // Resolvers context from WebSocket
-    subscriptions: {
-      path: options.subscriptionsPath,
-      onConnect: async (connection, websocket) => {
-        let contextData = {}
-        try {
-          contextData = await autoCall(context, {
-            connection,
-            websocket
-          })
-          contextData = Object.assign({}, contextData, { pubsub })
-        } catch (e) {
-          console.error(e)
-          throw e
+    plugins: [{
+      async serverWillStart () {
+        return {
+          async drainServer () {
+            subscriptionServer.close()
+          }
         }
-        return contextData
       }
-    }
+    }]
   }
 
   // Automatic mocking
@@ -146,6 +147,36 @@ module.exports = async (options, cb = null) => {
 
   // Apollo Server
   const server = new ApolloServer(apolloServerOptions)
+
+  const schema = makeExecutableSchema({
+    typeDefs: apolloServerOptions.typeDefs,
+    resolvers: apolloServerOptions.resolvers,
+    schemaDirectives: apolloServerOptions.schemaDirectives
+  })
+
+  subscriptionServer = SubscriptionServer.create({
+    schema,
+    execute,
+    subscribe,
+    onConnect: async (connection, websocket) => {
+      let contextData = {}
+      try {
+        contextData = await autoCall(context, {
+          connection,
+          websocket
+        })
+        contextData = Object.assign({}, contextData, { pubsub })
+      } catch (e) {
+        console.error(e)
+        throw e
+      }
+      return contextData
+    }
+  }, {
+    server: httpServer,
+    path: options.subscriptionsPath
+  })
+
   await server.start()
 
   // Express middleware
@@ -160,9 +191,7 @@ module.exports = async (options, cb = null) => {
   })
 
   // Start server
-  const httpServer = http.createServer(app)
   httpServer.setTimeout(options.timeout)
-  server.installSubscriptionHandlers(httpServer)
 
   httpServer.listen({
     host: options.host || 'localhost',

packages/@vue/cli-ui/package.json

@@ -36,6 +36,7 @@
   "dependencies": {
     "@achrinza/node-ipc": "^9.2.5",
     "@akryum/winattr": "^3.0.0",
+    "@graphql-tools/schema": "^8.5.0",
     "@vue/cli-shared-utils": "^5.0.7",
     "apollo-server-express": "^3.9.0",
     "clone": "^2.1.1",
@@ -60,6 +61,7 @@
     "prismjs": "^1.23.0",
     "rss-parser": "^3.11.0",
     "shortid": "^2.2.15",
+    "subscriptions-transport-ws": "^0.11.0",
     "typescript": "~4.5.5"
   },
   "devDependencies": {
@@ -91,7 +93,6 @@
     "start-server-and-test": "^1.12.0",
     "stylus": "^0.55.0",
     "stylus-loader": "^6.1.0",
-    "subscriptions-transport-ws": "^0.9.18",
     "validate-npm-package-name": "^3.0.0",
     "vue": "^2.6.14",
     "vue-apollo": "^3.0.7",