如何在React中的Apollo客户端突变组件中包装GraphQL突变

Question

我在将Apollo突变组件和查询组件包装在一起时遇到问题。 如果您查看updateCell函数，则可以获取该行的oldValue，newValue和ID。 如何使用Apollo客户突变组件将值传递给ADDCOST突变。

下面是我的代码：

在此先感谢您提供任何提示。

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;

Answer 1

用Mutation组件包装起来应该可以。 尝试这样的事情：

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