Refetch the post to update the comments

- I'm not happy with this as it is expensive, but seems to be used in other places in the code base, where I found the idea, @appinteractive left a comment suggesting a better approach would be to use subscriptions, but I haven't had time to research/try this option

Co-authored-by: Mike Aono <aonomike@gmail.com>
Co-authored-by: Joseph Ngugi <jngugi88@gmail.com>

webapp/pages/post/_id/_slug/index.vue

@@ -318,7 +318,8 @@ export default {
       return this.$store.getters['auth/user'].id === id
     },
     addComment(comment) {
-      this.post.comments.push(comment)
+      this.$apollo.queries.Post.refetch()
+      // this.post = { ...this.post, comments: [...this.post.comments, comment] }
     },
     handleSubmit() {
       const value = this.value
@@ -337,31 +338,9 @@ export default {
           variables: {
             postId: this.post.id,
             content: value
-          },
+          }
-          update: (store, { data: { CreateComment } }) => {
+        })
-            const data = store.readQuery({ query: POST_INFO })
-            // data.Post.push(CreateComment)
-            // store.writeQuery({ query: POST_INFO, data })
-            // // Add to Todo tasks list
-            // const todoQuery = {
-            // 	query: POST_INFO,
-            // 	variables: { filter: { done: false } },
-            // }
-            // const todoData = store.readQuery(todoQuery)
-            // todoData.allTasks.push(createTask)
-            // store.writeQuery({ ...todoQuery, data: todoData })
-						},
-						optimisticResponse: {
-							__typename: 'Mutation',
-							CreateComment: {
-								__typename: 'Comment',
-                id: null,
-                content: value
-							},
-						},
-					})
         .then(res => {
-          console.log(res.data.CreateComment)
           this.addComment(res.data.CreateComment)
           this.disabled = true
           this.loading = false
@@ -373,6 +352,19 @@ export default {
           this.disabled = false
         })
     }
+  },
+  apollo: {
+    Post: {
+      query() {
+        return require('~/graphql/PostQuery.gql')
+      },
+      variables() {
+        return {
+          slug: this.$route.params.slug
+        }
+      },
+      fetchPolicy: 'cache-and-network'
+    }
   }
 }
 </script>