Re-use module query in client code

client/src/components/modules/ModuleNavigation.vue

@@ -9,7 +9,7 @@
         <a href="#" class="module-navigation__anchor">1.2 Die drei Lernorte</a>
         <a href="#" class="module-navigation__anchor">Lernzielkontrolle</a>
       </div>
-      <router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse: Modul 1
+      <router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse: {{module.metaTitle}}
       </router-link>
       <div class="module-navigation__anchors">
         <router-link to="/module/geld/submissions" class="module-navigation__anchor">Tauschvorgänge</router-link>
@@ -21,7 +21,12 @@
           Bank»
         </router-link>
         <router-link to="/module/geld/submissions" class="module-navigation__anchor">Anlageberatung</router-link>
-        <router-link to="/module/geld/submissions" class="module-navigation__anchor">Welche Geldanlage ist sinnvoll?
+
+
+        <router-link to="/module/geld/submissions"
+                     v-for="assignment in module.assignments"
+                     :key="assignment.id"
+                     class="module-navigation__anchor">{{assignment.title}}
         </router-link>
       </div>
     </nav>
@@ -30,13 +35,12 @@
 </template>
 
 <script>
-  import ASSIGNMENTS_QUERY from '@/graphql/gql/assignmentsQuery.gql';
+  import {moduleQuery} from '@/graphql/queries';
+  // import ASSIGNMENTS_QUERY from '@/graphql/gql/assignmentsQuery.gql';
 
   export default {
     apollo: {
-      assignments: {
+      module: moduleQuery
-        query: ASSIGNMENTS_QUERY
-      }
     }
   }
 </script>

client/src/graphql/gql/moduleDetailsQuery.gql

@@ -1,4 +1,5 @@
 #import "./fragments/contentBlockParts.gql"
+#import "./fragments/assignmentParts.gql"
 query ModulesQuery($slug: String!) {
   module(slug: $slug) {
     id
@@ -7,6 +8,13 @@ query ModulesQuery($slug: String!) {
     metaTitle
     teaser
     intro
+    assignments {
+      edges {
+        node {
+          ...AssignmentParts
+        }
+      }
+    }
     objectiveGroups {
       edges {
         node {

client/src/graphql/queries.js

@@ -0,0 +1,13 @@
+import MODULE_DETAILS_QUERY from './gql/moduleDetailsQuery.gql';
+
+export function moduleQuery() {
+  return {
+    query: MODULE_DETAILS_QUERY,
+    variables: {
+      slug: this.$route.params.slug
+    },
+    update(data) {
+      return this.$getRidOfEdges(data).module || {};
+    }
+  }
+}

client/src/pages/module.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script>
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
   import ASSIGNMENTS_QUERY from '@/graphql/gql/assignmentsQuery.gql';
+  import {moduleQuery} from '@/graphql/queries';
 
   import Module from '@/components/modules/Module.vue';
 
@@ -14,18 +14,7 @@
     },
 
     apollo: {
-      module() {
+      module: moduleQuery,
-        return {
-          query: MODULE_DETAILS_QUERY,
-          variables: {
-            slug: this.$route.params.slug
-          },
-          update(data) {
-            const cleanedData = this.$getRidOfEdges(data);
-            return cleanedData.module || {};
-          }
-        }
-      },
       assignments: {
         query: ASSIGNMENTS_QUERY
       }