Refactor CreateComments functionality

- update apollo cache on successful mutation
- remove global event listener
- avoid refetch Post to update CommentsList
- return comment with its author from resolver

backend/src/schema/resolvers/comments.js

@@ -38,22 +38,41 @@ export default {
       if (!post) {
         throw new UserInputError(NO_POST_ERR_MESSAGE)
       }
-      const comment = await neo4jgraphql(object, params, context, resolveInfo, false)
+      const commentWithoutRelationships = await neo4jgraphql(
+        object,
+        params,
+        context,
+        resolveInfo,
+        false,
+      )
 
-      await session.run(
+      let transactionRes = await session.run(
         `
         MATCH (post:Post {id: $postId}), (comment:Comment {id: $commentId}), (author:User {id: $userId})
         MERGE (post)<-[:COMMENTS]-(comment)<-[:WROTE]-(author)
-        RETURN post`,
+        RETURN comment, author`,
         {
           userId: context.user.id,
           postId,
-          commentId: comment.id,
+          commentId: commentWithoutRelationships.id,
         },
       )
-      session.close()
 
-      return comment
+      const [commentWithAuthor] = transactionRes.records.map(record => {
+        return {
+          comment: record.get('comment'),
+          author: record.get('author'),
+        }
+      })
+
+      const { comment, author } = commentWithAuthor
+
+      const commentReturnedWithAuthor = {
+        ...comment.properties,
+        author: author.properties,
+      }
+      session.close()
+      return commentReturnedWithAuthor
     },
     DeleteComment: async (object, params, context, resolveInfo) => {
       const comment = await neo4jgraphql(object, params, context, resolveInfo, false)

backend/yarn.lock

@@ -3375,13 +3375,8 @@ extsprintf@^1.2.0:
 
 faker@Marak/faker.js#master:
   version "4.1.0"
-  uid "10bfb9f467b0ac2b8912ffc15690b50ef3244f09"
   resolved "https://codeload.github.com/Marak/faker.js/tar.gz/10bfb9f467b0ac2b8912ffc15690b50ef3244f09"
 
-"faker@git+https://github.com/Marak/faker.js.git#master":
-  version "4.1.0"
-  resolved "git+https://github.com/Marak/faker.js.git#10bfb9f467b0ac2b8912ffc15690b50ef3244f09"
-
 fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"

webapp/components/comments/CommentForm/index.vue

@@ -25,6 +25,8 @@
 <script>
 import gql from 'graphql-tag'
 import HcEditor from '~/components/Editor'
+import PostCommentsQuery from '~/graphql/PostCommentsQuery.js'
+import CommentMutations from '~/graphql/CommentMutations.js'
 
 export default {
   components: {
@@ -62,22 +64,22 @@ export default {
       this.disabled = true
       this.$apollo
         .mutate({
-          mutation: gql`
-            mutation($postId: ID, $content: String!) {
-              CreateComment(postId: $postId, content: $content) {
-                id
-                content
-              }
-            }
-          `,
+          mutation: CommentMutations().CreateComment,
           variables: {
             postId: this.post.id,
             content: this.form.content,
           },
+          update: (store, { data: { CreateComment } }) => {
+            const data = store.readQuery({
+              query: PostCommentsQuery(this.$i18n),
+              variables: { slug: this.post.slug },
+            })
+            data.Post[0].comments.push(CreateComment)
+            store.writeQuery({ query: PostCommentsQuery(this.$i18n), data })
+          },
         })
         .then(res => {
           this.loading = false
-          this.$root.$emit('refetchPostComments')
           this.clear()
           this.$toast.success(this.$t('post.comment.submitted'))
           this.disabled = false
@@ -94,6 +96,8 @@ export default {
           User(orderBy: slug_asc) {
             id
             slug
+            name
+            avatar
           }
         }`)
       },

webapp/components/comments/CommentForm/spec.js

@@ -81,11 +81,6 @@ describe('CommentForm.vue', () => {
         expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
       })
 
-      it('emits a method call with the returned comment', () => {
-        const rootWrapper = createWrapper(wrapper.vm.$root)
-        expect(rootWrapper.emitted().refetchPostComments.length).toEqual(1)
-      })
-
       describe('mutation fails', () => {
         it('shows the error toaster', async () => {
           await wrapper.find('form').trigger('submit')

webapp/components/comments/CommentList/CommentList.spec.js

@@ -88,10 +88,5 @@ describe('CommentList.vue', () => {
     it('displays comments when there are comments to display', () => {
       expect(wrapper.find('div.comments').text()).toEqual('this is a comment')
     })
-
-    it("refetches a post's comments from the backend", () => {
-      wrapper.vm.refetchPostComments()
-      expect(mocks.$apollo.queries.Post.refetch).toHaveBeenCalledTimes(1)
-    })
   })
 })

webapp/components/comments/CommentList/index.vue

@@ -30,6 +30,7 @@
 <script>
 import Comment from '~/components/Comment.vue'
 import HcEmpty from '~/components/Empty.vue'
+import PostCommentsQuery from '~/graphql/PostCommentsQuery.js'
 
 export default {
   components: {
@@ -49,25 +50,10 @@ export default {
       this.comments = post[0].comments || []
     },
   },
-  mounted() {
-    this.$root.$on('refetchPostComments', () => {
-      this.refetchPostComments()
-    })
-  },
-  beforeDestroy() {
-    this.$root.$off('refetchPostComments')
-  },
-  methods: {
-    refetchPostComments() {
-      if (this.$apollo.queries.Post) {
-        this.$apollo.queries.Post.refetch()
-      }
-    },
-  },
   apollo: {
     Post: {
       query() {
-        return require('~/graphql/PostCommentsQuery.js').default(this)
+        return PostCommentsQuery(this.$i18n)
       },
       variables() {
         return {

webapp/graphql/CommentMutations.js

@@ -0,0 +1,23 @@
+import gql from 'graphql-tag'
+
+export default () => {
+  return {
+    CreateComment: gql`
+      mutation($postId: ID, $content: String!) {
+        CreateComment(postId: $postId, content: $content) {
+          id
+          contentExcerpt
+          author {
+            id
+            slug
+            name
+            avatar
+          }
+          createdAt
+          deleted
+          disabled
+        }
+      }
+    `,
+  }
+}

webapp/graphql/PostCommentsQuery.js

@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 
-export default app => {
-  const lang = app.$i18n.locale().toUpperCase()
+export default i18n => {
+  const lang = i18n.locale().toUpperCase()
   return gql(`
     query Post($slug: String!) {
       Post(slug: $slug) {