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

Question

我需要能够执行一个函数(closemmodal)，当useMutation(插入/更新查询)成功执行时，在每个renderer之前或之上。

如果我从'useMutation'函数中取消onClose函数中的代码注释，那么从父函数中我就不能打开模态(open、close和toggle由父类处理，…见下)

模态孩子:

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

Answer 1

您将错误的选项传递给useQuery钩子。在appolo client 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 );
}

查看此处useQuery参数。

查看此处useMutation参数。

Answer 2

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

<DeviceModal closeModal={closeModal} />

onSuccess: props.closeModal()

Answer 3

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

const [dbUpdate,{ data, loading, error }] = useMutation(insertDevice_query);
const handleSubmit = (evt) => {
evt.preventDefault();
const deviceRec = recState;
dbUpdate({ variables: {device: deviceRec}})
.then( onClose() );
};