fix: Vue CLI UI graphql subscription server error

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

Author: haoqunjiang

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",