在 React bootstrap 数据表中添加 Apollo 客户端突变

Question

我能够在我的应用程序中获取 Apollo 查询组件。但是我很难添加突变。我写出了突变查询。我想使用 cellEditProp 挂钩函数中的行和单元格值并将它们传递到突变组件中。我很难弄清楚在哪里嵌套或包装突变组件。非常感谢任何提示。

function onSaveCell(row, cellName, cellValue) {

    //Need to use this data for the mutation
}

function onBeforeSaveCell(row, cellName, cellValue) {
    console.log(cellName, cellValue, row

    );
    return true;
}

const cellEditProp = {
    mode: 'click',
    blurToSave: true,
    beforeSaveCell: onBeforeSaveCell, // a hook for before saving cell
    afterSaveCell: onSaveCell  // a hook for after saving cell
};


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

      }
    }
    `;
const ADDCOST_MUTATION = gql`
  mutation updateCostlicense($costLicense: ApplicaitonCostInput!){
  updateCostLicense(costLicense: $costLicense){
    applicationId
    cost
    licenseType
  }
}
`;



class ApprovalRecord2 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));
                    console.log(chain);

                    return (
                        <div>
                            <h1>ApprovalRecord2</h1>
                            <p>Add/Remove Approvers</p>

                                    <BootstrapTable data={chain} striped hover pagination search options={options} cellEdit={cellEditProp} version='4'>
                                        <TableHeaderColumn isKey dataField='applicationId' dataSort={true}>ID</TableHeaderColumn>
                                        <TableHeaderColumn dataField='applicationName' dataSort={true}>Application</TableHeaderColumn>
                                        <TableHeaderColumn dataField='collectionName' dataSort={true}>Collection</TableHeaderColumn>
                                        <TableHeaderColumn dataField='licenseType' dataSort={true}>License</TableHeaderColumn>
                                        <TableHeaderColumn dataField='cost' dataSort={true}>Cost</TableHeaderColumn>
                                        <TableHeaderColumn dataField='approvers' dataSort={true}>Approvers</TableHeaderColumn>

                                    </BootstrapTable>

                                )}
                        </div>
                    );
                }}
            </Query>
        );
    }
}
export default ApprovalRecord2;

Answer 1

您可以 pass/inject（多个，命名的）突变（和查询）作为组件的道具 graphql()

在 React bootstrap 数据表中添加 Apollo 客户端突变

Adding Apollo client mutation in react bootstrap datatable

graphql

react-apollo