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

Question

我需要能够在 useMutation（insert/update 查询）成功执行时以及在每次重新渲染之前或之时执行函数 (closeModal)。

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

模态 child:

 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 );
}

Parent:

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

Answer 1

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

<DeviceModal closeModal={closeModal} />

onSuccess: props.closeModal()

Answer 2

答案是在调用钩子的地方使用 return promise，即使用 .then，如下所示

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

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

Answer 3

您将错误的选项传递给 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 here useQuery 参数。

Check here useMutation 参数。

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

How to use apolloClient's 'onSuccess' only once the useMutation has executed successfully

reactjs

apollo-client

react-hooks