Create two custom resolvers, get working with front end

- Had difficulty adding a relationship with one custom resolver, if id for comment was not passed in, the comment was not created, hard coding it in also wasn't a good solution

backend/src/resolvers/comments.js

@@ -2,24 +2,11 @@ import { neo4jgraphql } from 'neo4j-graphql-js'
 
 export default {
   Mutation: {
-    CreateComment: async (object, params, context, resolveInfo) => {
-      const { postId } = params
-      
-      const comment = await neo4jgraphql(object, params, context, resolveInfo, true)
-      
-      const session = context.driver.session()
-      const transactionRes = await session.run(`
-         MATCH (post:Post {id: $postId}), (comment:Comment {id: $commentId})
-         MERGE (post)<-[:COMMENTS]-(comment)
-         RETURN comment {.id, .content}`, {
-          postId,
-          commentId: comment.id
-        }
-      )
-
-      session.close()
-
-      return comment
+    CreateComment: (object, params, context, resolveInfo) => {
+      return neo4jgraphql(object, params, context, resolveInfo, false)
+    },
+    AddPostComments: (object, params, context, resolveInfo) => {
+      return neo4jgraphql(object, params, context, resolveInfo, false)
     }
   }
 }

backend/src/resolvers/comments.spec.js

@@ -19,8 +19,8 @@ afterEach(async () => {
 
 describe('CreateComment', () => {
   const mutation = `
-    mutation($id: ID!, $postId: ID!, $content: String!) {
-      CreateComment(id: $id, postId: $postId, content: $content) {
+    mutation($id: ID!, $content: String!) {
+      CreateComment(id: $id, content: $content) {
         id
         content
       }
@@ -29,8 +29,7 @@ describe('CreateComment', () => {
   describe('unauthenticated', () => {
     it('throws authorization error', async () => {
       variables = { 
-        id: 'c1', 
-        postId: 'p1', 
+        id: 'c1',
         content: "I'm not authorised to comment"
       }
       client = new GraphQLClient(host)
@@ -46,9 +45,8 @@ describe('CreateComment', () => {
     })
 
     it('creates a post', async () => {
-      variables = { 
-        id: 'c1', 
-        postId: 'p1', 
+      variables = {
+        id: 'c1',
         content: "I'm authorised to comment" 
       }
       const expected = {

backend/src/schema.graphql

@@ -27,7 +27,6 @@ type Mutation {
   enable(id: ID!): ID
   reward(fromBadgeId: ID!, toUserId: ID!): ID
   unreward(fromBadgeId: ID!, toUserId: ID!): ID
-  CreateComment(id: ID!, postId: ID!, content: String!) : Comment
   "Shout the given Type and ID"
   shout(id: ID!, type: ShoutTypeEnum): Boolean! @cypher(statement: """
     MATCH (n {id: $id})<-[:WROTE]-(wu:User), (u:User {id: $cypherParams.currentUserId})

backend/src/seed/factories/comments.js

@@ -4,7 +4,6 @@ import uuid from 'uuid/v4'
 export default function (params) {
   const {
     id = uuid(),
-    postId = uuid(),
     content = [
       faker.lorem.sentence(),
       faker.lorem.sentence()
@@ -15,7 +14,6 @@ export default function (params) {
     mutation {
       CreateComment(
         id: "${id}",
-        postId: "${postId}",
         content: "${content}"
       ) { id, content }
     }

webapp/graphql/AddPostComments.js

@@ -0,0 +1,18 @@
+import gql from 'graphql-tag'
+
+export default app => {
+  return {
+    AddPostComments: gql(`
+      mutation($from: _CommentInput!, $to: _PostInput!) {
+        AddPostComments(from: $from, to: $to) {
+            from {
+              id
+            }
+            to {
+              id
+            }
+          }
+        }
+    `)
+  }
+}

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

@@ -117,11 +117,11 @@
                 v-model="value"
               />
             </no-ssr>
+            <ds-space />
             <ds-flex>
-              <ds-flex-item>
+              <ds-flex-item width="50%">
                 <ds-button
                   :disabled="loading || disabled"
-                  ghost
                   @click.prevent="$router.back()"
                 >
                   {{ $t('actions.cancel') }}
@@ -140,23 +140,23 @@
               </ds-flex-item>
             </ds-flex>
           </ds-flex-item>
-          <ds-space margin-bottom="large" />
-          <div
-            v-if="post.comments"
-            id="comments"
-            class="comments"
-          >
-            <comment
-              v-for="comment in post.comments"
-              :key="comment.id"
-              :comment="comment"
-            />
-          </div>
-          <hc-empty
-            v-else
-            icon="messages"
-          />
         </ds-flex>
+        <ds-space margin-bottom="large" />
+        <div
+          v-if="post.comments"
+          id="comments"
+          class="comments"
+        >
+          <comment
+            v-for="comment in post.comments"
+            :key="comment.id"
+            :comment="comment"
+          />
+        </div>
+        <hc-empty
+          v-else
+          icon="messages"
+        />
       </ds-section>
     </ds-card>
   </transition>
@@ -198,7 +198,9 @@ export default {
     return {
       post: null,
       ready: false,
-      title: 'loading'
+      title: 'loading',
+      loading: false,
+      disabled: false
     }
   },
   watch: {
@@ -315,18 +317,48 @@ export default {
       return this.$store.getters['auth/user'].id === id
     },
     handleSubmit() {
-      this.$apollo.mutate({
-        mutation: gql`
-          mutation($content: String!) {
-            CreateComment(content: $content) {
-              content
+      this.loading = true
+      this.$apollo
+        .mutate({
+          mutation: gql`
+            mutation($content: String!) {
+              CreateComment(content: $content) {
+                id
+                content
+              }
             }
+          `,
+          variables: {
+            content: this.value
           }
-        `,
-        variables: {
-          content: this.value
-        }
-      })
+        })
+        .then(res => {
+          this.disabled = true
+          this.loading = false
+          const { id } = res.data.CreateComment
+          const commentId = { id: id }
+          const postId = { id: this.post.id }
+          const AddPostComments = require('~/graphql/AddPostComments.js').default(
+            this
+          )
+
+          this.$apollo
+            .mutate({
+              mutation: AddPostComments.AddPostComments,
+              variables: {
+                from: commentId,
+                to: postId
+              }
+            })
+            .then(res => {
+              this.$toast.success('Saved!')
+            })
+        })
+        .catch(err => {
+          this.$toast.error(err.message)
+          this.loading = false
+          this.disabled = false
+        })
     }
   }
 }