reactjs - 我如何等待 React Query 中的突变执行？

Question

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

Answer 1

依赖突 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 回调中可用