Updating comments and replies using updatequeries w/ optimistic updating.

client/coral-embed-stream/src/Comment.js

@@ -140,7 +140,6 @@ class Comment extends React.Component {
           ? <ReplyBox
               commentPostedHandler={() => {
                 setActiveReplyBox('');
-                refetch();
               }}
               setActiveReplyBox={setActiveReplyBox}
               parentId={parentId || comment.id}

client/coral-embed-stream/src/Embed.js

@@ -122,7 +122,6 @@ class Embed extends Component {
                    {
                      user
                      ? <CommentBox
-                        commentPostedHandler={refetch}
                         addNotification={this.props.addNotification}
                         postItem={this.props.postItem}
                         appendItemArray={this.props.appendItemArray}

client/coral-framework/graphql/mutations/index.js

@@ -10,16 +10,59 @@ export const postComment = graphql(POST_COMMENT, {
   options: () => ({
     fragments: commentView
   }),
-  props: ({mutate}) => ({
-    postItem: ({asset_id, body, parent_id} /* , type */ ) => {
-      return mutate({
+  props: ({ownProps, mutate}) => ({
+    postItem: ({asset_id, body, parent_id}) =>
+      mutate({
         variables: {
           asset_id,
           body,
           parent_id
+        },
+        optimisticResponse: {
+          createComment: {
+            comment: {
+              user: {
+                id: ownProps.auth.user.id,
+                name: ownProps.auth.user.username
+              },
+              created_at: new Date(),
+              body,
+              parent_id,
+              asset_id,
+              action_summaries: [],
+              tags: [],
+              status: null,
+              id: `${Date.now()}_temp_id`
+            }
+          }
+        },
+        updateQueries: {
+          AssetQuery: (oldData, {mutationResult:{data:{createComment:{comment}}}}) => {
+
+            // If posting a reply
+            return parent_id ? {
+              ...oldData,
+              asset: {
+                ...oldData.asset,
+                comments: oldData.asset.comments.map((comment) =>
+                  comment.id === parent_id
+                  ? {...comment, replies: [...comment.replies, comment]}
+                  : comment)
+              }
+            }
+
+          // If posting a top-level comment
+          : {
+            ...oldData,
+            asset: {
+              ...oldData.asset,
+              comments: [comment, ...oldData.asset.comments]
+            }
+          };
+          }
         }
-      });
-    }}),
+      })
+  }),
 });
 
 export const postLike = graphql(POST_LIKE, {

client/coral-framework/graphql/mutations/postComment.graphql

@@ -4,6 +4,9 @@ mutation CreateComment ($asset_id: ID!, $parent_id: ID, $body: String!) {
     createComment(asset_id:$asset_id, parent_id:$parent_id, body:$body) {
         comment {
           ...commentView
+          replies {
+              ...commentView
+          }
         }
         errors {
           translation_key