chore: Update apollo packages (#3779)

* chore: update apollo packages

* fix: better project switching logic

* fix(SharedData): wait for current project id

* refactor(apollo): use 2.5 client-size state API

Author: Akryum

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

@@ -43,6 +43,7 @@
     "fkill": "^5.3.0",
     "fs-extra": "^7.0.1",
     "globby": "^9.0.0",
+    "graphql-subscriptions": "^1.1.0",
     "graphql-tag": "^2.9.2",
     "graphql-type-json": "^0.2.1",
     "javascript-stringify": "^1.6.0",
@@ -58,7 +59,7 @@
     "rss-parser": "^3.4.3",
     "semver": "^5.5.0",
     "shortid": "^2.2.11",
-    "vue-cli-plugin-apollo": "^0.19.1",
+    "vue-cli-plugin-apollo": "^0.19.2",
     "vue-virtual-scroller": "^1.0.0-rc.2",
     "watch": "^1.0.2"
   },

packages/@vue/cli-ui/src/components/app/ProjectQuickDropdown.vue

@@ -89,7 +89,6 @@ import PROJECTS from '@/graphql/project/projects.gql'
 import PROJECT_OPEN from '@/graphql/project/projectOpen.gql'
 import PROJECT_SET_FAVORITE from '@/graphql/project/projectSetFavorite.gql'
 import OPEN_IN_EDITOR from '@/graphql/file/fileOpenInEditor.gql'
-import CURRENT_PROJECT_ID_SET from '@/graphql/project/currentProjectIdSet.gql'
 
 export default {
   apollo: {
@@ -125,13 +124,6 @@ export default {
       })
 
       await resetApollo()
-
-      await this.$apollo.mutate({
-        mutation: CURRENT_PROJECT_ID_SET,
-        variables: {
-          projectId: project.id
-        }
-      })
     },
 
     async toggleCurrentFavorite () {

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

@@ -1,6 +1,6 @@
-export default {
+export default () => ({
   connected: true,
   loading: 0,
   darkMode: false,
   currentProjectId: null
-}
+})

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

@@ -0,0 +1,17 @@
+import gql from 'graphql-tag'
+
+export default gql`
+extend type Query {
+  connected: Boolean!
+  loading: Boolean!
+  darkMode: Boolean!
+  currentProjectId: String
+}
+
+extend type Mutation {
+  connectedSet (value: Boolean!): Boolean
+  loadingChange (mod: Int!): Boolean
+  darkModeSet (enabled: Boolean!): Boolean
+  currentProjectIdSet (projectId: String): Boolean
+}
+`

packages/@vue/cli-ui/src/util/shared-data.js

@@ -43,21 +43,21 @@ export default {
         })
       },
 
-      created () {
+      async created () {
         const options = this.$options.sharedData
         if (options) {
           if (typeof options === 'function') {
             let smartQueries
-            this.$watch(options.bind(this), result => {
+            this.$watch(options.bind(this), async result => {
               if (smartQueries) {
                 smartQueries.forEach(s => s.destroy())
               }
-              smartQueries = this.$syncSharedData(result)
+              smartQueries = await this.$syncSharedData(result)
             }, {
               immediate: true
             })
           } else {
-            this.$syncSharedData(options)
+            await this.$syncSharedData(options)
           }
           // Force watchers to re-evaluate
           // Because we just added the proxies to this.$data.$sharedData[key]
@@ -69,15 +69,24 @@ export default {
 
       methods: {
         $getProjectId () {
-          const client = this.$apollo.getClient()
-          const result = client.readQuery({
-            query: CURRENT_PROJECT_ID
+          return new Promise((resolve) => {
+            const client = this.$apollo.getClient()
+            const observable = client.watchQuery({
+              query: CURRENT_PROJECT_ID
+            })
+            const sub = observable.subscribe({
+              next ({ data }) {
+                if (data.currentProjectId) {
+                  sub.unsubscribe()
+                  resolve(data.currentProjectId)
+                }
+              }
+            })
           })
-          return result.currentProjectId
         },
 
         async $getSharedData (id) {
-          const projectId = this.$getProjectId()
+          const projectId = await this.$getProjectId()
           const result = await this.$apollo.query({
             query: SHARED_DATA,
             variables: {
@@ -88,8 +97,8 @@ export default {
           return result.sharedData.value
         },
 
-        $watchSharedData (id, cb) {
-          const projectId = this.$getProjectId()
+        async $watchSharedData (id, cb) {
+          const projectId = await this.$getProjectId()
           return this.$apollo.addSmartQuery(id, {
             ...genQuery(id, projectId),
             manual: true,
@@ -99,8 +108,8 @@ export default {
           })
         },
 
-        $setSharedData (id, value) {
-          const projectId = this.$getProjectId()
+        async $setSharedData (id, value) {
+          const projectId = await this.$getProjectId()
           return this.$apollo.mutate({
             mutation: SHARED_DATA_UPDATE,
             variables: {
@@ -111,9 +120,7 @@ export default {
           })
         },
 
-        $syncSharedData (options) {
-          const projectId = this.$getProjectId()
-          const smartQueries = []
+        async $syncSharedData (options) {
           for (const key in options) {
             const id = options[key]
             this.$set(this.$data.$sharedData, key, null)
@@ -127,6 +134,11 @@ export default {
               enumerable: true,
               configurable: true
             })
+          }
+          const projectId = await this.$getProjectId()
+          const smartQueries = []
+          for (const key in options) {
+            const id = options[key]
             const smartQuery = this.$apollo.addSmartQuery(key, {
               ...genQuery(id, projectId),
               update: undefined,

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

@@ -3,7 +3,10 @@ import VueApollo from 'vue-apollo'
 import { createApolloClient } from 'vue-cli-plugin-apollo/graphql-client'
 import clientStateDefaults from './state/defaults'
 import clientStateResolvers from './state/resolvers'
+import clientStateTypeDefs from './state/typeDefs'
 // GraphQL documents
+import PROJECT_CURRENT from './graphql/project/projectCurrent.gql'
+import CURRENT_PROJECT_ID_SET from './graphql/project/currentProjectIdSet.gql'
 import CONNECTED_SET from '@/graphql/connected/connectedSet.gql'
 import LOADING_CHANGE from '@/graphql/loading/loadingChange.gql'
 import DARK_MODE_SET from '@/graphql/dark-mode/darkModeSet.gql'
@@ -24,9 +27,10 @@ const options = {
   wsEndpoint: endpoint,
   persisting: false,
   websocketsOnly: true,
-  clientState: {
-    defaults: clientStateDefaults,
-    resolvers: clientStateResolvers
+  typeDefs: clientStateTypeDefs,
+  resolvers: clientStateResolvers,
+  onCacheInit: cache => {
+    cache.writeData({ data: clientStateDefaults() })
   }
 }
 
@@ -64,11 +68,26 @@ export const apolloProvider = new VueApollo({
 
 export async function resetApollo () {
   console.log('[UI] Apollo store reset')
+
+  const { data: { projectCurrent } } = await apolloClient.query({
+    query: PROJECT_CURRENT,
+    fetchPolicy: 'network-only'
+  })
+  const projectId = projectCurrent.id
+
   try {
     await apolloClient.resetStore()
   } catch (e) {
     // Potential errors
   }
+
+  await apolloClient.mutate({
+    mutation: CURRENT_PROJECT_ID_SET,
+    variables: {
+      projectId
+    }
+  })
+
   loadDarkMode()
 }