Add SectionList.vue with second query

Author: lorensr

src/components/SectionList.vue

@@ -0,0 +1,56 @@
+<template>
+ <h2>Sections</h2>
+
+ <divv-if="loading">Loading...</div>
+
+ <divv-else-if="error">Error:{{error.message }}</div>
+
+ <divv-else-if="noSections">This chapter has no sections</div>
+
+ <ulv-else>
+ <liv-for="section of sections":key="section.id">
+{{section.number }}.{{section.title }}
+ </li>
+ </ul>
+</template>
+
+<script>
+import{useQuery, useResult } from'@vue/apollo-composable'
+import{gql } from'@apollo/client/core'
+import{computed } from'vue'
+
+exportdefault{
+ name:'SectionList',
+ props:{
+ id:{
+ type:Number,
+ required:true
+ }
+ },
+setup(props){
+const{result, loading, error } =useQuery(
+gql`
+querySectionList($id: Int!){
+chapter(id: $id){
+sections{
+id
+number
+title
+ }
+ }
+ }
+`,
+ props
+ )
+
+constsections=useResult(result, [], data=>data.chapter.sections)
+
+return{
+ loading,
+ error,
+ sections,
+ noSections:computed(() =>sections.value.length===1)
+ }
+ }
+}
+</script>

src/components/TableOfContents.vue

@@ -5,20 +5,34 @@
 
  <ul>
  <liv-for="chapter of chapters":key="chapter.id">
-{{
- chapter.number ? `${chapter.number}. ${chapter.title}` : chapter.title
- }}
+ <a@click="updateCurrentSection(chapter.id)">
+{{
+ chapter.number ? `${chapter.number}. ${chapter.title}` : chapter.title
+ }}
+ </a>
  </li>
  </ul>
+
+ <SectionList:id="currentSection" />
 </template>
 
 <script>
-import{gql } from'@apollo/client/core'
 import{useQuery, useResult } from'@vue/apollo-composable'
+import{gql } from'@apollo/client/core'
+import{ref } from'vue'
+
+importSectionListfrom'./SectionList.vue'
+
+constPREFACE_ID=-2
 
 exportdefault{
  name:'TableOfContents',
+ components:{
+ SectionList
+ },
 setup(){
+constcurrentSection=ref(PREFACE_ID)
+
 const{result, loading, error } =useQuery(gql`
 queryChapterList{
 chapters{
@@ -34,7 +48,9 @@ export default{
 return{
  loading,
  error,
- chapters
+ chapters,
+ currentSection,
+updateCurrentSection:newSection=> (currentSection.value= newSection)
  }
  }
 }