时间戳

首页 > 解决方案 > 如何在反应查询中进行依赖突变？

reactjs - 如何在反应查询中进行依赖突变？

问题描述

我有一个mutate函数，它发出POST请求并接收id，然后我需要立即调用下一个mutation函数按照这个进行购买，id我该怎么做？

const mutation = useCreatePaymentMethodMutation();

const handleSubmit = async(values:any) {
  const form = await mutation.mutateAsync({
    values,
    hash
  })
  return form
}

useCreatePaymentMethodMutation从@Hooks 导入

const useCreatePaymentMethodMutation = () => {
 return useMutation(
    ({ values, accessHash }: { values: any; accessHash: string }) =>
      createPaymentMethodRequest(values, accessHash),
    {
      onSuccess: (data) => {
        // usePayMutation(data.data, accessHash); error. I need to use data after 1st mutation in next 
        request
        console.log("on success data ", data);
      },
    }
  );
}

更新 1

这是我的usePayMutation方法

const usePayMutation = () => {
  return useMutation(({ data, id }: { data: any; id: string }) =>
    payRequest(data, id)
  );
};

标签： reactjsreact-query

解决方案

有 2 个选项供您选择

选项 1： 在你的useCreatePaymentMethodMutation钩子里

const useCreatePaymentMethodMutation = () => {
 const mutatePay = usePayMutation()
 return useMutation(
    ({ values, accessHash }: { values: any; accessHash: string }) =>
      createPaymentMethodRequest(values, accessHash),
    {
      onSuccess: (data) => {
        mutatePay(data.id)
      },
    }
  );
}

选项 2： 在您的handleSubmit功能中

const mutatePay = usePayMutation()

const handleSubmit = (values:any) => {
  return mutation.mutateAsync({
    values,
    hash
  }).then(data=> mutatePay(data.id))
}

推荐阅读