UseMutation 和 RefetchQueries：使用 react-apollo

问题描述

在使用 RefetchQueries 进行变异时，我的页面遇到了一些问题。

我有一个带有复选框的项目列表

ItemList（父组件）、ToolBar（子组件）

在子组件中，我有一个删除按钮，可以在从项目列表中选择项目后单击该按钮。我通过 props 将选中的项目传递给子组件。

点击删除按钮后，它应该调用 getTransactions 查询。根据结果​​，如果有任何可用交易，我必须显示模态并单击确定我必须删除这些项目。

<a className="flat-b" id="delete-checked" title="Move to Trash" onClick={() => getTransactions({variables:{itemIds: selectedItemIds}})} style={iconStyle}>
   <i className="fas fa-trash"></i>
</a>

const [getTransactions,{ loading,data }] = useLazyQuery(GET_TXNS);
const [TrashMuation,{loading: trashLoading,data:trashData}] = useMutation(trashMutation,{
        refetchQueries: [{query: GET_ITEMS,variables: queryVariables}]
    });

if (data) {
   if (transactionItems) {
      return <div>
                    <div id="mpn-modal-ol-div" className="mpn-modal-wrap" onClick={checkBubble}>
                        <div className="sp-lightBox" style={{maxHeight}}>
                            <h4 style={{width: '94%',textAlign: 'center',borderBottom: '1px solid #f2f4f9',padding: '20px 3%',fontSize: '1.3em'}}>
                                Transactions exist
                            </h4>
                            <section style={{overflowY: 'auto',maxHeight: `${maxHeight - 197}px`,margin: '24px 3%',width: '94%'}}>
                                Are you sure you want to delete the following item(s)? You already have transactions made against them.  
                                {transactionItemTitles}
                            </section>
                            <div style={{width: '94%',borderTop: '1px solid #f2f4f9',margin: '0 3% 15px 3%',paddingTop: '15px'}}>
                                <button className="sp-button grey" onClick={() => onCancel()}>
                                    <div>Cancel</div>
                                </button>
                                <button onClick={() => TrashMuation({variables: {ids: selectedItemIds}})} className="sp-button teal refund ml-10">
                                    <div>OK</div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
   } else {
      TrashMuation({variables: {ids: selectedItemIds}});
   }
}

在删除多个项目时，我必须检查所选项目是否有可用的交易。

现在删除工作正常，但突变 api 调用多次，查询 api 调用多次。我无法弄清楚。

如果我更改 if(data) 中的 if else 语句，则会出现错误状态转换期间无法更新。

请帮助实现目标。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）