如何在React的Apollo客户端突变组件中包装GraphQL突变[英] How to wrap GraphQL mutation in Apollo client mutation component in React

问题描述

I am having an issue wrapping the Apollo mutation component along with the query component. If you look at the updateCell function I am able to get the oldValue, newValue, and ID for the row. How can I pass the values to ADDCOST mutation using Apollo client mutation component.

Below is my code:

Thanks in advance for any tips.

const APPROVALCHAIN_QUERY = gql`
    {
      vApprovalChainApproverCountList{
        applicationId
        applicationName
        collectionName
        licenseType
        cost
        approvers

      }
    }
    `;
const ADDCOST_MUTATION = gql`
  mutation($cost: String!){
  updateCost(cost: $cost){
    applicationId
    cost
  }
}
`;



class ApprovalChain extends Component {
    render() {
        return (
            <Query
                query={APPROVALCHAIN_QUERY}
            >
                {({ loading, error, data }) => {
                    if (loading)
                        return <p>Loading...</p>;

                    if (error)
                        return <p>{error.message}</p>;

                    const chain = JSON.parse(JSON.stringify(data.vApprovalChainApproverCountList));

                    return (
                        <div>
                            <h1>ApprovalChain</h1>

                            <BootstrapTable
                                keyField="applicationId"
                                data={chain}
                                columns={columns}
                                cellEdit={cellEditFactory({
                                    mode: 'click',
                                    blurToSave: true,

           Need Help ------------->>>**updateCell:** (oldValue, newValue, row) => {

                                        console.log(row.applicationId, oldValue, newValue);
                                    },
                                })}
                            />
                        </div>
                    );
                }}
            </Query>
        );
    }
}
export default ApprovalChain;

推荐答案

Wrapping it up with a Mutation component should work. Try something like this:

class ApprovalChain extends Component {
  render() {
    return (
      <Query query={APPROVALCHAIN_QUERY}>
        {({ loading, error, data }) => {
          if (loading) return <p>Loading...</p>

          if (error) return <p>{error.message}</p>

          const chain = JSON.parse(
            JSON.stringify(data.vApprovalChainApproverCountList)
          )

          return (
            <div>
              <h1>ApprovalChain</h1>
              <Mutation mutation={ADDCOST_MUTATION}>
                {addCost => (
                  <BootstrapTable
                    keyField="applicationId"
                    data={chain}
                    columns={columns}
                    cellEdit={cellEditFactory({
                      mode: 'click',
                      blurToSave: true,
                      updateCell: (oldValue, newValue, row) => {
                        console.log(row.applicationId, oldValue, newValue)
                        addCost({ variables: { cost: newValue } });
                      }
                    })}
                  />
                )}
              </Mutation>
            </div>
          )
        }}
      </Query>
    )
  }
}
export default ApprovalChain