Use the new ApolloClient (with two links) for the toolbar mutations

cylc · Dec 19, 2019 · 8dca002 · 8dca002
1 parent 7ee4709
commit 8dca002
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 18 deletions.
diff --git a/src/components/cylc/Toolbar.vue b/src/components/cylc/Toolbar.vue
@@ -150,7 +150,7 @@ export default {
       const vm = this
       if (this.isHeld) {
         // release
-        this.$apollo.mutate({
+        this.$apolloClient.mutate({
           mutation: RELEASE_WORKFLOW,
           variables: {
             workflow: this.workflow.id
@@ -160,7 +160,7 @@ export default {
         })
       } else {
         // hold
-        this.$apollo.mutate({
+        this.$apolloClient.mutate({
           mutation: HOLD_WORKFLOW,
           variables: {
             workflow: this.workflow.id
@@ -172,7 +172,7 @@ export default {
     },
     onClickStop () {
       const vm = this
-      this.$apollo.mutate({
+      this.$apolloClient.mutate({
         mutation: STOP_WORKFLOW,
         variables: {
           workflow: this.workflow.id

diff --git a/src/main.js b/src/main.js
@@ -17,12 +17,19 @@ import store from '@/store'
 
 // GraphQL client
 import SubscriptionWorkflowService from 'workflow-service'
+import { createApolloClient } from '@/utils/graphql'
 
 // Sync store with router
 sync(store, router)
 
+// TODO: revisit this and evaluate other ways to build the GraphQL URL - not safe to rely on window.location (?)
+const baseUrl = `${window.location.hostname}${window.location.port ? ':' + window.location.port : ''}${window.location.pathname}`
+const httpUrl = `${window.location.protocol}//${baseUrl}graphql`
+const wsUrl = `ws://${baseUrl}subscriptions`
+Vue.prototype.$apolloClient = createApolloClient(httpUrl, wsUrl)
+
 // WorkflowService singleton available application-wide
-const workflowService = new SubscriptionWorkflowService()
+const workflowService = new SubscriptionWorkflowService(Vue.prototype.$apolloClient)
 Vue.prototype.$workflowService = workflowService
 
 Vue.config.productionTip = false

diff --git a/src/services/gquery.js b/src/services/gquery.js
@@ -1,8 +1,6 @@
 import { parse } from 'graphql/language/parser'
 import { print } from 'graphql/language/printer'
 
-import { createApolloClient } from '@/utils/graphql'
-
 function gClone (query) {
   /** Clone a GraphQL query.
    * Why oh why isn't there a better way of doing this in JS!
@@ -73,16 +71,8 @@ class GQuery {
    * GraphQL endpoint for a collection of views with potentially overlapping
    * queries.
    */
-
-  constructor (enableWebSockets = false) {
-    // TODO: revisit this and evaluate other ways to build the GraphQL URL - not safe to rely on window.location (?)
-    const baseUrl = `${window.location.hostname}${window.location.port ? ':' + window.location.port : ''}${window.location.pathname}`
-    const httpUrl = `${window.location.protocol}//${baseUrl}graphql`
-    const wsUrl = `ws://${baseUrl}subscriptions`
-    this.apolloClient = createApolloClient(
-      httpUrl,
-      enableWebSockets ? wsUrl : null
-    )
+  constructor (apolloClient) {
+    this.apolloClient = apolloClient
     this.query = null
     this.subscriptions = []
     this.views = []

diff --git a/src/services/workflow.service.js b/src/services/workflow.service.js
@@ -3,8 +3,8 @@ import store from '@/store/'
 import Alert from '@/model/Alert.model'
 
 class SubscriptionWorkflowService extends GQuery {
-  constructor () {
-    super(/* enableWebSockets */ true)
+  constructor (apolloClient) {
+    super(apolloClient)
     /**
      * @type {object}
      */