Add instrument query to instrument overview

client/src/graphql/gql/instrumentsByTypeQuery.gql

@@ -0,0 +1,12 @@
+query InstrumentQuery($type: String!){
+  instruments(type: $type) {
+    edges {
+      node {
+        id
+        title
+        contents
+        slug
+      }
+    }
+  }
+}

client/src/pages/instrumentOverview.vue

@@ -6,19 +6,44 @@
       </h1>
     </div>
     <div class="instrument-overview__list">
-      <instrument-teaser></instrument-teaser>
-      <instrument-teaser></instrument-teaser>
-      <instrument-teaser></instrument-teaser>
+      <instrument-teaser
+        :title="instrument.title"
+        :contents="instrument.contents"
+        v-for="instrument in instruments"
+        :key="instrument.id"
+      ></instrument-teaser>
     </div>
   </div>
 </template>
 
 <script>
   import InstrumentTeaser from '@/components/InstrumentTeaser';
+  import INSTRUMENTS_QUERY from '@/graphql/gql/instrumentsByTypeQuery.gql';
 
   export default {
     components: {
       InstrumentTeaser
+    },
+
+    apollo: {
+      instruments: {
+        query: INSTRUMENTS_QUERY,
+        variables: {
+          type: 'society'
+        },
+        manual: true,
+        result({data, loading, networkStatus}) {
+          if (!loading) {
+            this.instruments = this.$getRidOfEdges(data).instruments;
+          }
+        }
+      }
+    },
+
+    data() {
+      return {
+        instruments: []
+      }
     }
   }
 </script>
@@ -49,6 +74,7 @@
     &__list {
       padding: $large-spacing 0;
       max-width: 1200px;
+      width: 100%;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-auto-rows: auto;

client/src/router/index.js

@@ -55,7 +55,7 @@ const routes = [
   {path: '/room/:slug', name: 'room', component: room, props: true},
   {path: '/article/:slug', name: 'article', component: article, meta: {layout: 'simple'}},
   {
-    path: '/instrument/',
+    path: '/instruments/:slug',
     name: 'instrument-overview',
     component: instrumentOverview,
     meta: {subnavigation: true}