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

Question

我在将 Apollo 变更组件与查询组件一起包装时遇到问题。如果您查看 updateCell 函数，我可以获取该行的旧值、新值和 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

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

How to wrap GraphQL mutation in Apollo client mutation component in React

javascript

reactjs

graphql

react-apollo

apollo-client