How to make a dependent mutation in react query?

Question

I have a mutate function which make POST request and receives id , after then I need Immediately call next mutation function to make a purchase in accordance with this id, how do I make this ?

const mutation = useCreatePaymentMethodMutation();

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

useCreatePaymentMethodMutation is imported from @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);
      },
    }
  );
}

UPD 1

Here is my usePayMutation method

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

Fred Nguyen · Accepted Answer · 2021-09-20 15:00:24Z

7

There're 2 options for you to do it

Option 1: In your useCreatePaymentMethodMutation hooks

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

Option 2: In your handleSubmit function

const mutatePay = usePayMutation()

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

answered Sep 20, 2021 at 15:00

Fred Nguyen

3351 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sunstrike527 Over a year ago

I have the following error An unhandled error was caught from submitForm() TypeError: Cannot read properties of undefined (reading 'status')

Sunstrike527 Over a year ago

in 1st option

This expression is not callable.   Type 'UseMutationResult<AxiosResponse<any> | { isError: boolean; status: any; }, unknown, { data: any; id: string; }, unknown>' has no call signatures.

TkDodo · Accepted Answer · 2021-09-20 14:56:56Z

7

you would create two different mutations, and call them one after the other:

const createPayment = useCreatePaymentMethodMutation()
const otherMutation = useOtherMutation()

const handleSubmit = async(values:any) {
  try {
    const form = await createPayment.mutateAsync({
      values,
      hash
    })
    await otherMutation.mutateAsync(form.id)
  }
  catch(...)
}

answered Sep 20, 2021 at 14:56

TkDodo

30.4k5 gold badges85 silver badges100 bronze badges

4 Comments

Sunstrike527 Over a year ago

Cannot read properties of undefined (reading 'status') when i log form it is an object { config, data, headers, request , status, statusText } so I was trying to put in otherMutation form.data

Sunstrike527 Over a year ago

if i put whole form , otherMutation.mutateAsync(form) then

Argument of type 'AxiosResponse<any> | { isError: boolean; status: any; }' is not assignable to parameter of type '{ data: any; id: string; }'.

MadJoRR Over a year ago

thanks for the reply. do you have to try catch the result of a mutation? it has a lot of nice error handling features like onError, isError, onSettled etc.

corvid Over a year ago

mutateAsync is exactly what I needed! thank you!

Collectives™ on Stack Overflow

How to make a dependent mutation in react query?

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related