如何在React Query中实现有依赖关系的链式Mutation调用？

错误原因 #

你之前调用失败的核心原因是违反了React Hooks的调用规则：Hooks只能在React组件/自定义Hook的顶层作用域调用，不能在onSuccess回调、异步函数、条件判断这类非顶层代码中执行usePayMutation。

方案1：组件侧串行调用（推荐，逻辑最直观） #

直接在组件顶层预先声明两个mutation，在提交逻辑中按顺序调用即可：

// 组件顶层先调用两个自定义Hook
const createPayMethodMutation = useCreatePaymentMethodMutation();
const payMutation = usePayMutation();

const handleSubmit = async(values:any) => {
  try {
    // 第一步：调用创建支付方式接口
    const createResult = await createPayMethodMutation.mutateAsync({
      values,
      accessHash: hash
    })
    // 第二步：拿到返回的id后调用支付接口
    const payResult = await payMutation.mutateAsync({
      data: {}, // 此处替换为支付接口需要的业务参数
      id: createResult.data.id // 从第一个接口的返回值中取id
    })
    // 支付成功后续逻辑
    return payResult
  } catch (err) {
    // 统一处理两个接口的异常
    console.error('操作失败', err)
  }
}

方案2：封装为复用自定义Hook #

如果这个创建+支付的逻辑需要多处复用，可以把两个mutation封装到同一个自定义Hook中：

const useCreateAndPayMutation = (options?: {
  onPaySuccess?: (data: any) => void;
  onPayError?: (err: any) => void;
}) => {
  // 顶层预先调用支付mutation
  const payMutation = usePayMutation();
  return useMutation(
    ({ values, accessHash, payData }: { 
      values: any; 
      accessHash: string; 
      payData: any 
    }) => createPaymentMethodRequest(values, accessHash),
    {
      onSuccess: (createResult, variables) => {
        // 第一个请求成功后自动触发支付请求
        payMutation.mutate({
          data: variables.payData,
          id: createResult.data.id
        }, {
          onSuccess: options?.onPaySuccess,
          onError: options?.onPayError
        })
      }
    }
  );
}

组件侧使用方式：

const createAndPayMutation = useCreateAndPayMutation({
  onPaySuccess: (res) => {
    console.log('支付成功', res)
  }
})

const handleSubmit = (values: any) => {
  createAndPayMutation.mutate({
    values,
    accessHash: hash,
    payData: {} // 支付需要的业务参数
  })
}

注意事项 #

• 两个mutation的加载、报错状态相互独立，可分别通过createPayMethodMutation.isLoading、payMutation.isError等属性控制UI展示
• 如果需要中途重置请求状态，可调用对应mutation实例的reset()方法

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