如何在 React Query 中等待突变执行？

Question

我有两个涉及onVerificationCodeSubmit重置密码逻辑的 API 调用。问题是在成功回调newPasswordMutation之前执行。setRestorePasswordToken(data.restoreToken)verifyCodeMutation

我该如何等待呢？

我可以通过 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

依赖性突变基本上可以通过三种不同的方式解决：

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) withmutate和 回调：

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

Answer 2

万一它会对某人有帮助：我刚刚在第一个突变中执行了第二个突变onSuccess

  const { mutateAsync: verifyCodeMutation } = useMutation(verifyCode, {
    onSuccess: ({ data }) => {
      setRestorePasswordToken(data.restoreToken);
      const password = getValues("password");
      newPasswordMutation({ password, restorePasswordToken });
    },
  });