Add TableOfContents.vue with first query

Author: lorensr

Diff for: src/App.vue

@@ -1,20 +1,26 @@
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
   <h1>The GraphQL Guide</h1>
+  <TableOfContents />
 </template>
 
 <script>
 import { ApolloClient, InMemoryCache } from '@apollo/client/core'
 import { DefaultApolloClient } from '@vue/apollo-composable'
 import { provide } from 'vue'
 
+import TableOfContents from './components/TableOfContents.vue'
+
 const client = new ApolloClient({
   uri: 'https://api.graphql.guide/graphql',
   cache: new InMemoryCache()
 })
 
 export default {
   name: 'App',
+  components: {
+    TableOfContents
+  },
   setup() {
     provide(DefaultApolloClient, client)
   }

Diff for: src/components/TableOfContents.vue

@@ -0,0 +1,41 @@
+<template>
+  <div v-if="loading">Loading...</div>
+
+  <div v-else-if="error">Error: {{ error.message }}</div>
+
+  <ul>
+    <li v-for="chapter of chapters" :key="chapter.id">
+      {{
+        chapter.number ? `${chapter.number}. ${chapter.title}` : chapter.title
+      }}
+    </li>
+  </ul>
+</template>
+
+<script>
+import { gql } from '@apollo/client/core'
+import { useQuery, useResult } from '@vue/apollo-composable'
+
+export default {
+  name: 'TableOfContents',
+  setup() {
+    const { result, loading, error } = useQuery(gql`
+      query ChapterList {
+        chapters {
+          id
+          number
+          title
+        }
+      }
+    `)
+
+    const chapters = useResult(result, [])
+
+    return {
+      loading,
+      error,
+      chapters
+    }
+  }
+}
+</script>