Next.js Discord

Discord Forum

React Query Status: Idle

Unanswered
Saltwater Crocodile posted this in #help-forum
Open in Discord
Saltwater CrocodileOP
Hello Guys, currently i have a Register from with an useMutation Query.
It look like this:
const registerUser = (values: RegisterUserFormData) => {
    return axios.post(BACKEND_URL + '/auth/signup', values, {
        headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
        },
    })
}

export const useRegisterUser = () => {
    return useMutation(registerUser)
}

const { mutateAsync, isSuccess, isError, isLoading } = useRegisterUser();

mutateAsync(values);


The mutateAsync(values) is in the handleSubmit. Now on the first click the status of the request stays idle. And on the second click it goes through. Does anyone know why i get this?

12 Replies

Saltwater CrocodileOP
Thge first two functions are abstracted away in an own hook
Marchy
Need more information, also - I don't recommend using axios or react-query with next as they're not needed
Saltwater CrocodileOP
What more information is needed?
Why is it not recommended? I really like the states, like loading, error and more
Marchy
your handleSubmit would be useful, or any more info you can provide
Saltwater CrocodileOP
const submitData = async (formData: RegisterUserFormData) => {
    const name = formData['name'];
    const email = formData['email'];
    const password = formData['password'];
    const values = {
      name,
      email,
      password,
    };
    mutateAsync(values);
    console.log('SUC: ', isSuccess);
    console.log('STATUS', status);
    // const response = await axios
    //   .post(BACKEND_URL + '/auth/signup', values, {
    //     headers: {
    //       'Content-Type': 'application/json',
    //       Accept: 'application/json',
    //     },
    //   })
    //   .then((response: any) => response)
    //   .catch((error: any) => error.response.data);
    if (isSuccess) {
      toast.success(`${toaster('register')}`, {
        description: `${toaster('registerdescription')}`,
        duration: 2000,
      });
      setTimeout(() => {
        window.location.href = '/signin';
      }, 2000);
    } else if (isError) {
      toast.error(`${toaster('error')}`, {
        description: `${toaster('errordescription')}`,
      });
      setTimeout(() => {
        window.location.reload();
      }, 2000);
    }
  };
ignore the commented code
Marchy
mutateAsync(values); what does this do?
might be missing an await there
Saltwater CrocodileOP
const { mutateAsync, isSuccess, isError, isLoading } = useRegisterUser();
this calls the mutationfunction which is here:
@Saltwater Crocodile const { mutateAsync, isSuccess, isError, isLoading } = useRegisterUser();
Marchy
Where is this actually defined? might just need await in front of your mutateAsync