What is the best way about send multiple query in useMutation (React-Query)

Question

I developed login function use by react-query in my react app

The logic is as follows

First restAPI for checking duplication Email
If response data is true, send Second restAPI for sign up.

In this case, I try this way


// to declare useMutation object
let loginQuery = useMutation(checkDuple,{
    // after check duplication i'm going to sign up
    onSuccess : (res) => {
      if(res === false && warning.current !== null){
        warning.current.innerText = "Sorry, This mail is duplicatied"
      }else{
        let res = await signUp() 
      }
    }
  })

//---------------------------------------------------------------------------------
const checkDuple = async() => {                                       
    let duple = await axios.post("http://localhost:8080/join/duple",{
        id : id,
    })
}

const signUp = async() => {
    let res = await axios.post("http://localhost:8080/join/signUp",{
    id : id,
    pass : pass
  })
  console.log(res.data)
  localStorage.setItem("token", res.data)
  navigate("/todo")
}

I think, this isn't the best way, If you know of a better way than this, please advise.

ceckenrode · Accepted Answer · 2022-12-12 05:47:04Z

2

Better to have another async function that does both things.

something like

const checkDupleAndSignUp = async () => {
  await checkDuple();
  await signUp();
};

And then use that in your useMutation instead.

Other things to consider:

Maybe move the logic to set local storage and navigate to another page in the onSuccess instead.

You can also throw your own error if one or the other request fails and then check which error happened using onError lifecycle of useMutation, and maybe display a message for the user depending on which request failed.

edited Dec 12, 2022 at 5:47

answered Dec 12, 2022 at 5:41

ceckenrode

4,7138 gold badges30 silver badges50 bronze badges

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

Comments

Ali Sattarzadeh · Accepted Answer · 2022-12-12 06:12:44Z

You can handle both of them in a single function and in mutation just add token in localStorage and navigate

like this:

 const checkDupleAndSignUp = async () => {
    return checkDuple().then(async res => {
      if (res === false) {
        return {
          isSuccess: false,
          message: 'Sorry, This mail is duplicatied',
        };
      }
      const { data } = await signUp();
        return {
          isSuccess: true,
          data,
        };
      
    });
  };

and in mutation :

  let loginQuery = useMutation(checkDupleAndSignUp, {

    onSuccess: res => {
      if (res.isSuccess) {
        console.log(res.data);
        localStorage.setItem('token', res.data);
        navigate('/todo');
      } else if (warning.current !== null) {
        warning.current.innerText = res.message;
      }
    },
  });

Collectives™ on Stack Overflow

What is the best way about send multiple query in useMutation (React-Query)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related