Not perfect, but an intermediary solution for the edges/nodes problem

client/src/components/Chapter.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chapter">
     <h3>{{chapter.title}}</h3>
-    <content-block :contentBlock="contentBlock" :key="contentBlock.id" v-for="contentBlock in chapter.contentBlocks">
+    <content-block :contentBlock="contentBlock" :key="contentBlock.id" v-for="contentBlock in chapter.contentBlocks.edges">
     </content-block>
 
   </div>
@@ -12,6 +12,7 @@
 
   export default {
     props: ['chapter'],
+
     components: {
       ContentBlock
     }

client/src/components/Module.vue

@@ -8,9 +8,9 @@
     </div>
 
     <h3>Lernziele</h3>
-    <objective-group v-for="group in module.objectivegroupSet" :key="group.id" :group="group"></objective-group>
+    <objective-group v-for="group in module.objectivegroupSet.edges" :key="group.id" :group="group"></objective-group>
 
-    <chapter :chapter="chapter" v-for="chapter in module.chapters" :key="chapter.id"></chapter>
+    <chapter :chapter="chapter" v-for="chapter in module.chapters.edges" :key="chapter.id"></chapter>
     <h3>1.1 Lehrbeginn</h3>
     <h4>Das Interview</h4>
     <h4>Tipp</h4>

client/src/components/ObjectiveGroup.vue

@@ -3,7 +3,7 @@
     <h4>{{group.title}}</h4>
 
     <ul class="objective-group__objective-list">
-      <li class="objective-group__objective" v-for="objective in group.objectiveSet" :key="objective.id">
+      <li class="objective-group__objective" v-for="objective in group.objectiveSet.edges" :key="objective.id">
         {{objective.text}}
       </li>
     </ul>

client/src/graphql/client.js

@@ -1,7 +1,6 @@
 import {InMemoryCache} from 'apollo-cache-inmemory/lib/index'
 import {HttpLink} from 'apollo-link-http/lib/index'
 import {ApolloClient} from 'apollo-client/index'
-import {ApolloLink} from 'apollo-link'
 import fetch from 'unfetch'
 
 const httpLink = new HttpLink({
@@ -13,59 +12,10 @@ const httpLink = new HttpLink({
   }
 })
 
-const purgeEdgesNodes = new ApolloLink((operation, forward) => {
-  return forward(operation).map(response => {
-    // if (response.data.user.lastLoginDate) {
-    //   response.data.user.lastLoginDate = new Date(
-    //     response.data.user.lastLoginDate
-    //   );
-    // }
-    // data.data.modules = ['is_me']
-    // response.data.modules = ['is_me']
-    // debugger
-
-    return response;
-  });
-});
-
-const consoleLink = new ApolloLink((operation, forward) => {
-  console.log(`starting request for ${operation.operationName}`);
-
-  // This is a proposal for our edges/nodes removal: plz review
-  //
-  // 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])
-  //       }
-  //     }
-  //     return newObj
-  //   } else {
-  //     return collection
-  //   }
-  // }
-
-  return forward(operation).map((data) => {
-    console.log(`ending request for ${operation.operationName}`);
-
-    // data.data.modules = ['is_me']
-    // debugger
-    // let data = getRidOfEdges(inData)
-    // return resultData;
-
-    return data
-  })
-})
-
-const composedLink = ApolloLink.from([purgeEdgesNodes, consoleLink, httpLink]);
-
 // Create the apollo client
 export default new ApolloClient({
-  link: composedLink,
+  // link: composedLink,
+  link: httpLink,
   cache: new InMemoryCache(),
   connectToDevTools: true
 })

client/src/main.js

@@ -11,6 +11,29 @@ import store from '@/store/index'
 
 Vue.config.productionTip = false
 
+// TODO: Move into a separate project
+//
+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 === 'node') {
+          newObj = getRidOfEdges(collection[k])
+        } else {
+          newObj[k] = getRidOfEdges(collection[k])
+        }
+      }
+      return newObj
+    } else {
+      return collection
+    }
+  }
+}
+
+Vue.use(EdgesNodePlugin)
+
 Vue.use(VueApollo)
 Vue.use(VueAxios, axios)
 Vue.use(VueVimeoPlayer)

client/src/pages/module.vue

@@ -1,15 +1,12 @@
 <template>
-  <module v-bind:module="module"></module>
+  <module :module="module"></module>
 </template>
 
 <script>
+  import Vue from 'vue'
   import Module from '@/components/Module.vue';
   import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
 
-  function mapNodes(connection, fn) {
-    return connection.edges.map(({node}) => fn(node));
-  }
-
   export default {
     apollo: {
       moduleQuery: {
@@ -20,50 +17,10 @@
         fetchPolicy: 'network-only',
         manual: true,
         result({data, loading, networkStatus}) {
-
-          // This is a proposal for our edges/nodes removal: plz review
-          //
-          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])
-                }
-              }
-              return newObj
-            } else {
-              return collection
-            }
-          }
-
           if (!loading) {
-            // Result of edges/nodes removal
+            const purgedData = Vue.getRidOfEdges(data)
-            //
+            this.module = purgedData.modules.edges[0]
-            const purgedData = getRidOfEdges(data)
-            this.module = purgedData.modules[0]
           }
-
-          // if (!loading) {
-          //   const node = data.modules.edges[0].node;
-          //   this.module = {
-          //     ...node,
-          //     objectiveGroups: mapNodes(node.objectivegroupSet, node => {
-          //       return {
-          //         ...node,
-          //         objectives: mapNodes(node.objectiveSet, node => node)
-          //       };
-          //     }),
-          //     chapters: mapNodes(node.chapters, node => {
-          //       return {
-          //         ...node,
-          //         contentBlocks: mapNodes(node.contentBlocks, node => node)
-          //       }
-          //     })
-          //   };
-          // }
         }
       }
     },
@@ -72,9 +29,17 @@
       Module
     },
 
+    // TODO: can we do better by defining a type for module?
     data() {
       return {
-        module: {}
+        module: {
+          objectivegroupSet: {
+            edges: {}
+          },
+          chapters: {
+            edges: {}
+          }
+        }
       }
     }
   }