feat: apollo on detail

pages/index.vue

@@ -57,6 +57,7 @@
           </v-card-subtitle>
           <v-card-title
             class="subtitle-2 text-capitalize font-weight-bold title--text text-left mt-1 py-1"
+            @click="() => redirect(book.title)"
           >
             {{ book.title }}
           </v-card-title>
@@ -81,6 +82,9 @@ export default {
     fetchBook() {
       this.$store.dispatch('book/fetchBook')
     },
+    redirect(title) {
+      return this.$router.push(`/products/${title}`)
+    },
   },
 }
 </script>

pages/products/_bookname.vue

@@ -4,5 +4,13 @@
 <script>
 export default {
   setup() {},
+  computed: {
+    bookTitle() {
+      return this.$route.params.bookname
+    },
+  },
+  mounted() {
+    this.$store.dispatch('book/fetchBookByTitle', this.bookTitle)
+  },
 }
 </script>

store/book.js

@@ -4,6 +4,7 @@ const state = () => ({
   listBook: [],
   listHomeBook: [],
   listAuthor: [],
+  bookDetail: {},
 })
 
 const mutations = {
@@ -16,6 +17,9 @@ const mutations = {
   setListAuthor(state, param) {
     state.listAuthor = param
   },
+  setBookDetail(state, param) {
+    state.setBookDetail = param
+  },
 }
 
 const actions = {
@@ -61,6 +65,31 @@ const actions = {
     })
     store.commit('setListAuthor', response.data.book)
   },
+  async fetchBookByTitle(store, title) {
+    const response = await this.app.apolloProvider.defaultClient.query({
+      query: gql`
+        query MyQuery($title: String!) {
+          book(where: { title: { _eq: $title } }) {
+            author
+            image
+            slug
+            title
+            detail {
+              category
+              country
+              description
+              language
+              page_count
+              publisher
+              release_date
+            }
+          }
+        }
+      `,
+      variables: { title },
+    })
+    store.commit('setBookDetail', response.data.book)
+  },
 }
 
 export default { state, mutations, actions }