diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 3bf787a9c..48dd52d09 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -140,7 +140,6 @@ class Comment extends React.Component { ? { setActiveReplyBox(''); - refetch(); }} setActiveReplyBox={setActiveReplyBox} parentId={parentId || comment.id} diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index d12dbd0d8..6240c293b 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -122,7 +122,6 @@ class Embed extends Component { { user ? ({ 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, { diff --git a/client/coral-framework/graphql/mutations/postComment.graphql b/client/coral-framework/graphql/mutations/postComment.graphql index 6ce46eaa8..3840d66c2 100644 --- a/client/coral-framework/graphql/mutations/postComment.graphql +++ b/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