refactor(ui): update to vue-cli-plugin-apollo 0.10

Author: Guillaume Chau

packages/@vue/cli-ui/.env.production

@@ -1 +1 @@
-VUE_APP_GRAPHQL_ENDPOINT=
+VUE_APP_GRAPHQL_WS=

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

@@ -7,12 +7,12 @@
     "lint": "vue-cli-service lint",
     "graphql-api": "cross-env VUE_CLI_DEBUG=true vue-cli-service graphql-api",
     "run-graphql-api": "vue-cli-service run-graphql-api",
-    "run-test-graphql-api": "cross-env NODE_ENV=test yarn run graphql-api",
+    "run-test-graphql-api": "cross-env NODE_ENV=test VUE_APP_GRAPHQL_PORT=4040 VUE_APP_GRAPHQL_WS=ws://localhost:4040/graphql yarn run graphql-api",
     "prepublishOnly": "yarn run lint --no-fix && yarn run build",
-    "test:e2e:dev": "vue-cli-service test:e2e --mode development",
-    "test:e2e:run": "vue-cli-service test:e2e --mode production --headless --url=http://localhost:4000",
-    "test:e2e": "start-server-and-test run-test-graphql-api http://localhost:4000 test:e2e:dev",
-    "test:run": "start-server-and-test run-test-graphql-api http://localhost:4000 test:e2e:run",
+    "test:e2e:dev": "cross-env VUE_APP_GRAPHQL_WS=ws://localhost:4040/graphql vue-cli-service test:e2e --mode development",
+    "test:e2e:run": "vue-cli-service test:e2e --mode production --headless --url=http://localhost:4040",
+    "test:e2e": "start-server-and-test run-test-graphql-api http://localhost:4040 test:e2e:dev",
+    "test:run": "start-server-and-test run-test-graphql-api http://localhost:4040 test:e2e:run",
     "test": "yarn run build && cd ../cli-ui-addon-webpack && yarn run build && cd ../cli-ui && yarn run test:run"
   },
   "dependencies": {
@@ -31,7 +31,7 @@
     "semver": "^5.5.0",
     "shortid": "^2.2.8",
     "terminate": "^2.1.0",
-    "vue-cli-plugin-apollo": "^0.8.0",
+    "vue-cli-plugin-apollo": "^0.10.0",
     "watch": "^1.0.2"
   },
   "devDependencies": {
@@ -42,19 +42,13 @@
     "@vue/eslint-config-standard": "^3.0.0-beta.11",
     "@vue/ui": "^0.2.5",
     "ansi_up": "^2.0.2",
-    "apollo-cache-inmemory": "^1.1.10",
-    "apollo-client": "^2.2.6",
-    "apollo-link": "^1.2.1",
-    "apollo-link-state": "^0.4.0",
-    "apollo-link-ws": "^1.0.0",
     "cross-env": "^5.1.5",
     "eslint": "^4.16.0",
     "file-icons-js": "^1.0.3",
     "lint-staged": "^6.0.0",
     "start-server-and-test": "^1.4.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
-    "subscriptions-transport-ws": "^0.9.9",
     "vue": "^2.5.16",
     "vue-apollo": "^3.0.0-beta.5",
     "vue-color": "^2.4.6",

packages/@vue/cli-ui/src/apollo.js

@@ -6,8 +6,12 @@ const { resolveModuleRoot } = require('../utils/resolve-path')
 
 let addons = []
 
-let baseUrl = process.env.VUE_APP_GRAPHQL_ENDPOINT
-if (typeof baseUrl === 'undefined') baseUrl = 'http://localhost:4000'
+let baseUrl = process.env.VUE_APP_GRAPHQL_WS
+if (typeof baseUrl === 'undefined') {
+  baseUrl = 'http://localhost:4000'
+} else {
+  baseUrl = baseUrl.replace(/ws:\/\/([a-z0-9_-]+:\d+).*/i, 'http://$1')
+}
 
 function list (context) {
   return addons

packages/@vue/cli-ui/src/graphql-api/connectors/client-addons.js

@@ -1,29 +1,26 @@
 import Vue from 'vue'
 import VueApollo from 'vue-apollo'
-import createApolloClient from './apollo'
+import { createApolloClient } from 'vue-cli-plugin-apollo/graphql-client'
 
 // Install the vue plugin
 Vue.use(VueApollo)
 
-let base = process.env.VUE_APP_GRAPHQL_ENDPOINT
-if (typeof base === 'undefined') {
-  base = 'http://localhost:4000'
-} else if (base === '') {
-  base = window.location.origin
+let endpoint = process.env.VUE_APP_GRAPHQL_WS
+if (typeof endpoint === 'undefined') {
+  endpoint = 'ws://localhost:4000/graphql'
+} else if (endpoint === '') {
+  endpoint = window.location.origin.replace('http', 'ws') + '/graphql'
 }
 
 // Config
 const options = {
-  base,
-  endpoints: {
-    graphql: process.env.VUE_APP_GRAPHQL_PATH || '/graphql',
-    subscription: process.env.VUE_APP_GRAPHQL_SUBSCRIPTIONS_PATH || '/graphql'
-  },
-  persisting: false
+  wsEndpoint: endpoint,
+  persisting: false,
+  websocketsOnly: true
 }
 
 // Create apollo client
-export const apolloClient = createApolloClient(options)
+export const { apolloClient } = createApolloClient(options)
 
 // Create vue apollo provider
 export const apolloProvider = new VueApollo({

packages/@vue/cli-ui/src/state/defaults.js

@@ -9,7 +9,7 @@ async function ui (options = {}, context = process.cwd()) {
 
   // Config
   process.env.VUE_APP_GRAPHQL_PORT = port
-  process.env.VUE_APP_GRAPHQL_ENDPOINT = ''
+  process.env.VUE_APP_GRAPHQL_WS = ''
   process.env.VUE_APP_GRAPHQL_PLAYGROUND_PATH = '/graphql-playground'
 
   if (!options.dev) {