Use component this scoped function instead of Vue global function for getRidOfEdges

client/src/main.js

@@ -11,29 +11,26 @@ import store from '@/store/index'
 
 Vue.config.productionTip = false
 
-// TODO: Move into a separate project
+// TODO: Move into a separate project as a plugin
 //
-const EdgesNodePlugin = {}
-EdgesNodePlugin.install = function (Vue, options) {
-  Vue.getRidOfEdges = function getRidOfEdges(collection) {
-    if (typeof collection === 'object') {
-      let newObj = {}
-      for (const k in collection) {
-        if (k === 'edges' || k === 'node') {
-          newObj = getRidOfEdges(collection[k])
-        } else {
-          newObj[k] = getRidOfEdges(collection[k])
-          delete newObj[k]['__typename']
-        }
+function getRidOfEdges(collection) {
+  if (typeof collection === 'object') {
+    let newObj = {}
+    for (const k in collection) {
+      if (k === 'edges' || k === 'node') {
+        newObj = getRidOfEdges(collection[k])
+      } else {
+        newObj[k] = getRidOfEdges(collection[k])
+        delete newObj[k]['__typename']
       }
-      return newObj
-    } else {
-      return collection
     }
+    return newObj
+  } else {
+    return collection
   }
 }
 
-Vue.use(EdgesNodePlugin)
+Object.defineProperty(Vue.prototype, '$getRidOfEdges', {value: getRidOfEdges})
 
 Vue.use(VueApollo)
 Vue.use(VueAxios, axios)

client/src/pages/index.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script>
-  import Vue from 'vue'
   import ALL_MODULES from '@/graphql/gql/allModules.gql'
 
   export default {
@@ -33,7 +32,7 @@
         manual: true,
         result({data, loading, networkStatus}) {
           if (!loading) {
-            this.modules = Vue.getRidOfEdges(data).modules
+            this.modules = this.$getRidOfEdges(data).modules
           }
         }
       }

client/src/pages/module.vue

@@ -3,7 +3,6 @@
 </template>
 
 <script>
-  import Vue from 'vue'
   import Module from '@/components/Module.vue';
   import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
 
@@ -18,7 +17,7 @@
         manual: true,
         result({data, loading, networkStatus}) {
           if (!loading) {
-            const purgedData = Vue.getRidOfEdges(data)
+            const purgedData = this.$getRidOfEdges(data)
             this.module = purgedData.modules[0]
           }
         }