React Query中多mutation调用的最佳实践方案咨询

我正尝试以最优方式实现useMutation并保持代码整洁，但在管理复杂调用时遇到了难题。例如，用户在我的应用中创建账户时，需要完成以下步骤：

• 调用服务器验证reCAPTCHA分数
• 调用服务器创建用户，返回登录令牌和将发送给用户的账户验证码
• 调用服务器发送验证码，随后存储登录Cookie并跳转至下一页

我考虑过在后端通过单个接口完成所有操作，但感觉这会让后端自定义路由职责过于混杂。假设我希望这些操作在用户点击注册按钮时以独立调用的方式执行，请问最佳的管理方式是什么？

我尝试过两种方案：

方案1：用onSuccess回调链式调用 #

const doSendVerification = useMutation((email)=>sendVerification(email), 
  {
    onSuccess: (data)=>{
        storeCookie(data)
        redirect('nextPath')
      }, 
    onError: (err)=>{handleError(err)}
  })

const doCreateUser = useMutation((user)=>createUser(user), 
  {
    onSuccess: (data)=>{doSendVerification.mutate(data)}, 
    onError: (err)=>{handleError(err)}
  })

const doVerifyRecaptcha = useMutation((token)=>verifyRecaptcha(token), 
  {
    onSuccess: (data)=>{doCreateUser.mutate(data)}, 
    onError: (err)=>{handleError(err)}
  })

这种方式代码显得十分臃肿，虽然能用但希望有更好的实现。

方案2：用mutateAsync封装到单个函数 #

const handleSubmit = async ()=> {
  try {
    const verified = await doVerifyRecaptcha.mutateAsync(token)
    const newUser = await doCreateUser.mutateAsync(userInfo)
    const sendEmail = await doSendVerification.mutateAsync(emailInfo)
    storeLoginCookie(newUser)
    redirect('nextPath')
  } catch (err){
    handle(err)
  }
}

这个方案看起来更简洁，但不确定是否本身更优，而且错误处理不如mutate那样自动化。希望获取处理多步骤调用的建议，或是简化步骤的方法。

注：代码中的拼写或不准确之处仅为演示思路，我已实现类似的可用版本，只是不确定哪种方案更合适。

推荐方案及优化建议 #

优先选择mutateAsync方案，原因如下： #

1. 逻辑可读性更强：所有步骤按顺序写在同一个函数里，流程清晰，不需要跳来跳去查看各个mutation的回调就能理解完整注册流程。
2. 控制粒度更高：可以在任意步骤之间插入额外逻辑（比如根据验证结果调整用户信息），灵活处理每个步骤的返回值，相比onSuccess的链式结构，修改和维护更方便。
3. 错误处理更统一：虽然需要自己写try/catch，但可以把错误处理逻辑封装成通用函数，统一处理不同步骤的错误（比如区分“验证码验证失败”和“用户创建失败”的提示），反而比分散在各个onError里更一致。

对mutateAsync方案的优化： #

• 复用错误处理逻辑：封装通用错误处理函数，根据错误类型返回对应用户提示，避免在try/catch里写冗余判断。
• 保留mutation状态管理：每个useMutation仍保留自身的loading、error状态，可在UI上给每个步骤显示对应加载提示（如“验证验证码中...”），提升用户体验。
• 封装流程函数：把注册流程封装成独立async函数，让组件代码更简洁，也方便后续单元测试。

优化后的示例：

// 定义各个mutation，保留状态但去掉onSuccess/onError
const doVerifyRecaptcha = useMutation((token) => verifyRecaptcha(token))
const doCreateUser = useMutation((user) => createUser(user))
const doSendVerification = useMutation((email) => sendVerification(email))

const handleRegister = async () => {
  try {
    const verified = await doVerifyRecaptcha.mutateAsync(token)
    const newUser = await doCreateUser.mutateAsync({ ...userInfo, recaptchaToken: verified.token })
    await doSendVerification.mutateAsync(newUser.email)
    
    storeLoginCookie(newUser)
    redirect('nextPath')
  } catch (err) {
    // 根据错误类型给出精准提示
    if (err.response?.data?.type === 'recaptcha') {
      handleError('验证码验证失败，请重试')
    } else if (err.response?.data?.type === 'user') {
      handleError('用户创建失败，邮箱已存在')
    } else {
      handleError('系统错误，请稍后重试')
    }
  }
}

关于后端接口的补充建议 #

虽然你担心单个接口职责混杂，但可以考虑在后端做轻量流程编排：比如一个register接口内部调用reCAPTCHA验证、创建用户、发送邮件这三个服务层方法，路由层只负责接收请求和返回响应，业务逻辑拆分到服务层。这样前端只需调用一个接口，减少网络请求次数，后端职责依然清晰，后续流程变更只需修改服务层，前端无需改动，维护成本更低。

两种方案的适用场景 #

• 如果每个步骤需要独立触发（比如用户可单独重新发送验证码），保留单个mutation+onSuccess的方式更合适。
• 如果是注册这类连贯流程，mutateAsync+统一流程函数的方式更优。

内容的提问来源于stack exchange，提问作者Brian Gwaltney