mutateAsync + Form wrap

[m-reyes-h]

Hello, I'm using mutateAsync + Form wrap but mutate is not returning data, is Error, or isSuccess at first call.

const mutation = useMutation((data) =>
    axios.post(url, {
      email: "[email protected]",
      password: data.userPassword,
    })
  );

  // Form submittion
  const onSubmit = async (formData) => {
    await mutation.mutateAsync(formData);
    console.log(
      "succ",
      mutation.status,
      "error",
      mutation.error,
      "data",
      mutation.data
    );
  };

the response code it's:
succ: idle error: null data: undefined

[TkDodo]

In your Event handler, you are closuring over mutation. It’s properties will not change inside one function call, even when it’s async - it will be available in the next render cycle

[m-reyes-h]

Thanks @TkDodo I solved the issue with side effects

mutate(todo, {
   onSuccess: (data, variables, context) => {
     // I will fire second!
   },
   onError: (error, variables, context) => {
     // I will fire second!
   },
   onSettled: (data, error, variables, context) => {
     // I will fire second!
   },
 })

the final code looks like this:

const onSubmit = async (formData) => {
    await mutation.mutate(formData, {
      onError: (error, variables, context) => {},
      onSuccess: (data, variables, context) => {
        dispatch(loginAsync({ token: data.token, user: variables.userName }));
      },
    });
  };

thanks for the tip!

[TkDodo]

in that case - why use mutateAsync and not just mutate ?

[m-reyes-h]

I came with that "solution" because I did not know how to use mustateAsync for a similar purpose. But totally agree with you, I don't need mustateAsync in that example.