仅在 useMutation 成功执行后如何使用 apolloClient 的“onSuccess”

Posted 2023-03-10

【中文标题】仅在 useMutation 成功执行后如何使用 apolloClient 的“onSuccess”

【英文标题】：How to use apolloClient's 'onSuccess' only once the useMutation has executed successfully

【发布时间】：2021-12-06 09:39:29

【问题描述】：

当 useMutation（插入/更新查询）成功执行时，以及在每次重新渲染之前或之后，我需要能够执行功能（closeModal）。

如果我从“useMutation”函数中取消注释 onClose 函数中的代码，那么从父级我无法打开模式 （打开关闭和切换由父级处理，..见下文）

模态孩子：

 export default function DeviceModal(props) 
    const device = useQuery(getDevice_query, variables: id: dataRowId);
    const [dbUpdate, data, loading, error ] = useMutation(insertDevice_query,
    
        //onSuccess: onClose(),
    );

    const onClose = () => 
        props.closeModal();
    ;

return ( ModalMarkup );

家长：

const [isModalShown, toggleModal] = React.useState(false);
const closeModal = () => 
    toggleModal(false)

const openModal = () => 
    toggleModal(true)

【参考方案1】：

您将错误的选项传递给 useQuery 挂钩。 appolo 客户端 v3 中没有onSuccess 参数。您需要将其替换为onCompleted。现在当你使用useMutation 或useQuery 你应该传递onCompleted 而不是onSucess。所以你的代码会是这样的。

    export default function DeviceModal(props) 
    const device = useQuery(getDevice_query, variables: id: dataRowId);
    const [dbUpdate, data, loading, error ] = useMutation(insertDevice_query,
    
        onCompleted: ()=>
         onClose();
    ,
    );

    const onClose = () => 
        props.closeModal();
    ;

      return ( ModalMarkup );
    

Check hereuseQuery 参数。

Check hereuseMutation 参数。

【参考方案2】：

一种选择是将函数作为道具传递给DeviceModal，然后在您的成功处理程序中调用它。例如：

<DeviceModal closeModal=closeModal />

onSuccess: props.closeModal()

【参考方案3】：

答案是在调用钩子的地方使用返回承诺，即使用 .then 如下

const [dbUpdate, data, loading, error ] = useMutation(insertDevice_query);

const handleSubmit = (evt) => 
    evt.preventDefault();
    const deviceRec = recState;
    dbUpdate( variables: device: deviceRec)
        .then( onClose() );
;

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.com/help/how-to-answer。祝你好运?