我在 onVerificationCodeSubmit
中有两个 API 调用,涵盖重置密码逻辑。问题是 newPasswordMutation
在 verifyCodeMutation
成功回调中的 setRestorePasswordToken(data.restoreToken)
之前执行。
我怎么等呢?
我可以通过 React-Query 工具处理它吗?
const { mutateAsync: verifyCodeMutation } = useMutation(verifyCode, {
onSuccess: ({ data }) => setRestorePasswordToken(data.restoreToken),
});
const { mutateAsync: newPasswordMutation } = useMutation(createNewPassword, {
enabled: restorePasswordToken,
onSuccess: () => setPasswordResetSuccessfull(true),
});
const onRestorePasswordSubmit = ({ email }) => {
restorePasswordMutation(email);
};
const onVerificationCodeSubmit = async ({ verificationCode, password }) => {
await verifyCodeMutation({ verificationCode, restoreToken });
newPasswordMutation({ password, restorePasswordToken });
};
最佳答案
依赖突 rebase 本上可以通过 3 种不同的方式解决:
1) 在 mutateFn
中进行多次调用:
const mutate = useMutation((data) =>
axios.post('/something', { data })
.then((somethingResult) =>
axios.put('/somethingElse', { somethingResult })
)
)
<button onClick={() => mutate('data') />
优点是一种突变具有一种加载状态。缺点是如果需要,您无法轻易单独触发它们。
2) 使用mutateAsync
:
const mutate1 = useMutation((data) => axios.post('/something', { data }))
const mutate2 = useMutation(somethingResult) => axios.put('/somethingElse', { somethingResult })
<button onClick={async () => {
try {
const somethingResult = await mutate1.muteateAsync('data')
const result = await mutate2.mutateAsync(somethingResult)
} catch {}
}} />
有点样板,你很可能需要组合加载状态
3) 使用mutate
和回调:
const mutate1 = useMutation((data) => axios.post('/something', { data }))
const mutate2 = useMutation(somethingResult) => axios.put('/somethingElse', { somethingResult })
<button onClick={() => {
mutate1.mutate('data', {
onSuccess: mutate2.mutate
})
}} />
分开了,但还是挺简洁的。超过 2 个突变会变得困惑,如果需要,最终结果只会在第二个突变的 onSuccess 回调中可用
关于reactjs - 我如何等待 React Query 中的突变执行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72950435/