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

【问题标题】：How to wrap GraphQL mutation in Apollo client mutation component in React如何在 React 的 Apollo 客户端突变组件中包装 GraphQL 突变
【发布时间】：2019-02-02 04:41:44
【问题描述】：

我在包装 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;

【问题讨论】：

标签： javascript reactjs graphql react-apollo apollo-client

【解决方案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

【讨论】：

有没有办法在同一突变组件中添加第二个突变以便在不同的列上进行操作？感谢您的回答 Carlos 上面的代码有效！
我知道你的意思是“在同一个突变中添加第二个突变”，但你可以很容易地组合它们，看看stackoverflow.com/questions/51717277/…
这很有帮助！谢谢卡洛斯！