From 3d10534da103fd197a9160491e4530c7d5c2ed76 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 25 Apr 2017 19:54:54 +0700 Subject: [PATCH] RespectPlugin use fat query --- .../client/components/RespectButton.js | 10 +- .../client/containers/RespectButton.js | 134 ++++++++---------- 2 files changed, 62 insertions(+), 82 deletions(-) diff --git a/plugins/coral-plugin-respect/client/components/RespectButton.js b/plugins/coral-plugin-respect/client/components/RespectButton.js index c1e0c1b47..faeda1991 100644 --- a/plugins/coral-plugin-respect/client/components/RespectButton.js +++ b/plugins/coral-plugin-respect/client/components/RespectButton.js @@ -12,8 +12,8 @@ const lang = new I18n(translations); class RespectButton extends Component { handleClick = () => { - const {postRespect, showSignInDialog, deleteAction, commentId} = this.props; - const {me, comment} = this.props.data; + const {postRespect, showSignInDialog, deleteAction} = this.props; + const {root: {me}, comment} = this.props; const myRespectActionSummary = getMyActionSummary('RespectActionSummary', comment); @@ -29,17 +29,17 @@ class RespectButton extends Component { } if (myRespectActionSummary) { - deleteAction(myRespectActionSummary.current_user.id); + deleteAction(myRespectActionSummary.current_user.id, comment.id); } else { postRespect({ - item_id: commentId, + item_id: comment.id, item_type: 'COMMENTS' }); } } render() { - const {comment} = this.props.data; + const {comment} = this.props; if (!comment) { return null; diff --git a/plugins/coral-plugin-respect/client/containers/RespectButton.js b/plugins/coral-plugin-respect/client/containers/RespectButton.js index a69c62032..be389c72a 100644 --- a/plugins/coral-plugin-respect/client/containers/RespectButton.js +++ b/plugins/coral-plugin-respect/client/containers/RespectButton.js @@ -6,33 +6,22 @@ import withFragments from 'coral-framework/hocs/withFragments'; import {showSignInDialog} from 'coral-framework/actions/auth'; import RespectButton from '../components/RespectButton'; -// TODO: use `update` instead of `updateQueries` for optimistic mutations. -// See https://dev-blog.apollodata.com/apollo-clients-new-imperative-store-api-6cb69318a1e3 -// and https://github.com/apollographql/apollo-client/issues/1224 - const isRespectAction = (a) => a.__typename === 'RespectActionSummary'; -export const RESPECT_QUERY = gql` - query RespectQuery($commentId: ID!) { - comment(id: $commentId) { - id - action_summaries { - ... on RespectActionSummary { - count - current_user { - id - } +const COMMENT_FRAGMENT = gql` + fragment RespectButton_comment on Comment { + id + action_summaries { + ... on RespectActionSummary { + count + current_user { + id } } } - me { - status - } } `; -const withQuery = graphql(RESPECT_QUERY); - const withDeleteAction = graphql(gql` mutation deleteAction($id: ID!) { deleteAction(id:$id) { @@ -43,7 +32,7 @@ const withDeleteAction = graphql(gql` } `, { props: ({mutate}) => ({ - deleteAction: (id) => { + deleteAction: (id, commentId) => { return mutate({ variables: {id}, optimisticResponse: { @@ -52,27 +41,26 @@ const withDeleteAction = graphql(gql` errors: null, } }, - updateQueries: { - RespectQuery: (prev) => { - const action_summaries = prev.comment.action_summaries; - const idx = action_summaries.findIndex(isRespectAction); - if (idx < 0 || get(action_summaries[idx], 'current_user.id') !== id) { - return prev; - } - const next = { - ...prev, - comment: { - ...prev.comment, - action_summaries: action_summaries.map( - (a, i) => i !== idx ? a : ({ - ...a, - count: a.count - 1, - current_user: null, - })), - } - }; - return next; - }, + update: (proxy) => { + const fragmentId = `Comment_${commentId}`; + + // Read the data from our cache for this query. + const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId}); + + // Check whether we respected this comment. + const idx = data.action_summaries.findIndex(isRespectAction); + if (idx < 0 || get(data.action_summaries[idx], 'current_user.id') !== id) { + return; + } + + data.action_summaries[idx] = { + ...data.action_summaries[idx], + count: data.action_summaries[idx].count - 1, + current_user: null, + }; + + // Write our data back to the cache. + proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data}); }, }); }, @@ -105,46 +93,39 @@ const withPostRespect = graphql(gql` }, } }, - updateQueries: { - RespectQuery: (prev, {mutationResult, queryVariables}) => { - if (queryVariables.commentId !== respect.item_id) { - return prev; - } + update: (proxy, mutationResult) => { + const fragmentId = `Comment_${respect.item_id}`; - let action_summaries = prev.comment.action_summaries; - let idx = action_summaries.findIndex(isRespectAction); + // Read the data from our cache for this query. + const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId}); - // Check whether we already respected this comment. - if (idx >= 0 && action_summaries[idx].current_user) { - return prev; - } + // Add our comment from the mutation to the end. + let idx = data.action_summaries.findIndex(isRespectAction); - if (idx < 0) { + // Check whether we already respected this comment. + if (idx >= 0 && data.action_summaries[idx].current_user) { + return; + } - // Add initial action when it doesn't exist. - action_summaries = action_summaries.concat([{ - __typename: 'RespectActionSummary', - count: 0, - current_user: null, - }]); - idx = action_summaries.length - 1; - } + if (idx < 0) { - const respectAction = mutationResult.data.createRespect.respect; - const next = { - ...prev, - comment: { - ...prev.comment, - action_summaries: action_summaries.map( - (a, i) => i !== idx ? a : ({ - ...a, - count: a.count + 1, - current_user: respectAction, - })), - } - }; - return next; - }, + // Add initial action when it doesn't exist. + data.action_summaries.push({ + __typename: 'RespectActionSummary', + count: 0, + current_user: null, + }); + idx = data.action_summaries.length - 1; + } + + data.action_summaries[idx] = { + ...data.action_summaries[idx], + count: data.action_summaries[idx].count + 1, + current_user: mutationResult.data.createRespect.respect, + }; + + // Write our data back to the cache. + proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data}); }, }); }, @@ -178,7 +159,6 @@ const enhance = compose( connect(null, mapDispatchToProps), withDeleteAction, withPostRespect, - withQuery, ); export default enhance(RespectButton);