Merge new comment into comments list

Author: johnnyoshika

src/Comment/CommentAdd/index.js

@@ -1,12 +1,62 @@
 import React, { Component } from 'react';
 import { Mutation } from 'react-apollo';
 
+import { GET_COMMENTS_OF_ISSUE } from '../CommentList/queries';
 import { ADD_COMMENT } from './mutations';
 
 import TextArea from '../../TextArea';
 import Button from '../../Button';
 import ErrorMessage from '../../Error';
 
+const updateComments = ({
+  repositoryOwner,
+  repositoryName,
+  issue
+},
+client,
+{
+  data: {
+    addComment: {
+      commentEdge
+    }
+  }
+}
+) => {
+  const data = client.readQuery({
+    query: GET_COMMENTS_OF_ISSUE,
+    variables: {
+      repositoryOwner,
+      repositoryName,
+      number: issue.number
+    }
+  });
+
+  client.writeQuery({
+    query: GET_COMMENTS_OF_ISSUE,
+    variables: {
+      repositoryOwner,
+      repositoryName,
+      number: issue.number
+    },
+    data: {
+      ...data,
+      repository: {
+        ...data.repository,
+        issue: {
+          ...data.repository.issue,
+          comments: {
+            ...data.repository.issue.comments,
+            edges: [
+              ...data.repository.issue.comments.edges,
+              commentEdge
+            ]
+          }
+        }
+      }
+    }
+  })
+};
+
 class CommentAdd extends Component {
   state = {
     value: '',
@@ -23,13 +73,18 @@ class CommentAdd extends Component {
   };
 
   render() {
-    const { issue } = this.props;
+    const { issue, repositoryOwner, repositoryName } = this.props;
     const { value } = this.state;
 
     return (
       <Mutation
         mutation={ADD_COMMENT}
         variables={{ body: value, subjectId: issue.id }}
+        update={(client, data) => updateComments({
+          repositoryOwner,
+          repositoryName,
+          issue
+        }, client, data)}
       >
         {(addComment, { data, loading, error }) => (
           <div>

src/Comment/CommentList/index.js

@@ -70,6 +70,8 @@ const Comments = ({ repositoryOwner, repositoryName, issue }) => (
 
           <CommentAdd
             issue={issue}
+            repositoryOwner={repositoryOwner}
+            repositoryName={repositoryName}
           />
         </Fragment>
       );