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

问题描述

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

下面是我的代码:

预先感谢您提供任何提示.

const APPROVALCHAIN_QUERY = gql`{vApprovalChainApproverCountList{应用程序ID应用名称集合名称许可证类型成本审批人}}`;const ADDCOST_MUTATION = gql`突变($成本:字符串！){更新成本(成本:$ 成本){应用程序ID成本}}`;类 ApprovalChain 扩展组件 {使成为() {返回 (<查询查询={APPROVALCHAIN_QUERY}>{({ 加载，错误，数据 }) =>{如果(加载)返回<p>正在加载...</p>;如果(错误)返回<p>{error.message}</p>;const 链 = JSON.parse(JSON.stringify(data.vApprovalChainApproverCountList));返回 (<div><h1>审批链</h1><引导表keyField =applicationId"数据={链}列={列}cellEdit={cellEditFactory({模式:点击"，模糊保存:真，需要帮助 ------------->>>**updateCell:** (oldValue, newValue, row) =>{console.log(row.applicationId, oldValue, newValue);},})}/>

);}}</查询>);}}导出默认审批链；

解决方案

用 Mutation 组件包装它应该可以工作.尝试这样的事情:

class ApprovalChain 扩展组件 {使成为() {返回 (<查询查询={APPROVALCHAIN_QUERY}>{({ 加载，错误，数据 }) =>{if (loading) return <p>Loading...</p>if (error) return 
{error.message}
const 链 = JSON.parse(JSON.stringify(data.vApprovalChainApproverCountList))返回 (<div><h1>审批链</h1><突变突变={ADDCOST_MUTATION}>{addCost =>(<引导表keyField =applicationId"数据={链}列={列}cellEdit={cellEditFactory({模式:点击"，模糊保存:真，updateCell: (oldValue, newValue, row) =>{console.log(row.applicationId, oldValue, newValue)addCost({ variables: { cost: newValue } });}})}/>)}</突变>

)}}</查询>)}}导出默认 ApprovalChain

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

这篇关于如何在 React 中的 Apollo 客户端变异组件中包装 GraphQL 变异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！