Hello Guys,

I have a Problem on one of my current Projects on the signup Page with React Query. From the official Documentation i can read that this should work.

Here i have the registerUser function with the axios:

export const registerUser = async (values: RegisterUserFormData) => {
    return await axios.post(BACKEND_URL + '/auth/signup', values, {
        headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
        },
    })
}

This then gets called in the client component on the top:

const mutation = useMutation({ mutationFn: registerUser });

And then on the onSubmit function the mutateAsync function is called:

const submitData = async (formData: RegisterUserFormData) => {
    const name = formData['name'];
    const email = formData['email'];
    const password = formData['password'];
    const values = {
      name,
      email,
      password,
    };
    await mutation.mutateAsync(values);
    console.log('MUTATION: ', mutation);
    if (mutation.isSuccess) {
      toast.success(`${toaster('register')}`, {
        description: `${toaster('registerdescription')}`,
        duration: 2000,
      });
      setTimeout(() => {
        window.location.href = '/signin';
      }, 2000);
    } else if (mutation.isError) {
      toast.error(`${toaster('error')}`, {
        description: `${toaster('errordescription')}`,
      });
      setTimeout(() => {
        window.location.reload();
      }, 2000);
    }
  };

When console logging mutation all of the properties are undefined so i can't forward from this. When calling the submit a second time the properties get filled and it works. Does anyone know why this occurs?