Fetch topic information from API

client/src/graphql/gql/allModules.gql

@@ -1,12 +1,9 @@
+#import "./fragments/moduleParts.gql"
 query ModulesQuery {
   modules {
     edges {
       node {
-        id
-        title
-        metaTitle
-        teaser
-        slug
+        ...ModuleParts
       }
     }
   }

client/src/graphql/gql/fragments/moduleParts.gql

@@ -0,0 +1,7 @@
+fragment ModuleParts on ModuleNode {
+  id
+  title
+  metaTitle
+  teaser
+  slug
+}

client/src/graphql/gql/topicQuery.gql

@@ -0,0 +1,16 @@
+#import "./fragments/moduleParts.gql"
+query Topic($slug: String!){
+  topic(slug: $slug) {
+    id
+    title
+    teaser
+    description
+    modules {
+      edges {
+        node {
+          ...ModuleParts
+        }
+      }
+    }
+  }
+}

client/src/pages/topic.vue

@@ -1,11 +1,8 @@
 <template>
   <div class="topic">
-    <h1 class="topic__title">Berufliche Grundbildung</h1>
+    <h1 class="topic__title">{{topic.title}}</h1>
     <p class="topic__teaser">
-      Die berufliche Grundbildung lehrt Sie, den Arbeitsalltag erfolgreich zu bewältigen, Ihre Fähigkeiten zu entwickeln
-      und beruflich flexibel zu sein. Ebenso wichtig ist der Umgang mit verschiedensten Mitmenschen. Eine angemessene
-      mündliche Kommunikation erleichtert
-      das Zusammenleben und Zusammenarbeiten.
+      {{topic.teaser}}
     </p>
     <div class="topic__modules">
       <module-teaser v-for="module in modules" :key="module.id" v-bind="module"></module-teaser>
@@ -15,7 +12,7 @@
 
 <script>
   import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
-  import MODULES_QUERY from '@/graphql/gql/allModules.gql';
+  import TOPIC_QUERY from '@/graphql/gql/topicQuery.gql';
 
   export default {
     components: {
@@ -23,17 +20,30 @@
     },
 
     apollo: {
-      modules: {
-        query: MODULES_QUERY,
+      topic: {
+        query: TOPIC_QUERY,
+        variables: {
+          slug: 'geld-und-kauf'
+        },
         update(data) {
-          return this.$getRidOfEdges(data).modules || {};
+          return this.$getRidOfEdges(data).topic || {};
         }
       }
     },
 
+    computed: {
+      modules() {
+        return this.topic.modules;
+      }
+    },
+
     data() {
       return {
-        modules: []
+        topic: {
+          modules: {
+            edges: []
+          }
+        }
       }
     }
   }

server/books/schema/queries.py

@@ -152,7 +152,7 @@ class FilteredChapterNode(DjangoObjectType):
 
 class BookQuery(object):
     book = relay.Node.Field(BookNode)
-    topic = relay.Node.Field(TopicNode)
+    topic = graphene.Field(TopicNode, slug=graphene.String())
     module = graphene.Field(ModuleNode, slug=graphene.String())
     chapter = relay.Node.Field(FilteredChapterNode)
     content_block = relay.Node.Field(ContentBlockNode)
@@ -183,3 +183,13 @@ class BookQuery(object):
         if slug is not None:
             return Module.objects.get(slug=slug)
         return None
+
+    def resolve_topic(self, info, **kwargs):
+        slug = kwargs.get('slug')
+        id = kwargs.get('id')
+
+        if id is not None:
+            return get_object(Topic, id)
+        if slug is not None:
+            return Topic.objects.get(slug=slug)
+        return None