useForm `mutationError` property instead of `onMutationError` function?

In the useForm hook, there is an onMutationError prop. There is also an errorNotification prop. But I can't see any state based property for the presence of an error after the mutation. I don't want to use errorNotification to trigger a Toast, I want to show a banner on my page instead. Do I have to manually maintain a mutationError state in the onMutationError function? That means I'll also need to handle clearing it onSubmit, etc. I'd prefer if there was an exposed mutationError or similar property I could access directly...
3 Replies
kapa.ai
kapa.ai7mo ago
Hi @edlaver. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you're correct. The useForm hook in Refine does not directly expose a mutationError state. However, you can access the error state from the mutationResult returned by the useForm hook. Here's how you can do it:
import { useForm } from "@refinedev/core";

const { mutationResult } = useForm({
// ...
});

// you can access the errors state from the mutationResult
console.log(mutationResult.error?.errors);
import { useForm } from "@refinedev/core";

const { mutationResult } = useForm({
// ...
});

// you can access the errors state from the mutationResult
console.log(mutationResult.error?.errors);
In this case, mutationResult.error?.errors will give you the errors returned from the dataProvider. You can then display these errors in a banner on your page as per your requirements. You can find more information about this in the Refine documentation (https://refine.dev/docs/api-reference/core/hooks/useForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai7mo ago
<@943302615452745779> kapa.ai is still learning and improving, please let us know how it did by reacting below
inland-turquoise
inland-turquoise7mo ago
Lovely, that works a treat, thanks. FYI, the mutationResult prop has to be destructured from the refineCore property, it's not on the root useForm properties. i.e.
const {
refineCore: { mutationResult },
} = useForm();

const { data } = mutationResult;
const {
refineCore: { mutationResult },
} = useForm();

const { data } = mutationResult;
See: https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#mutationresult Other than that, it's exactly what I wanted, thanks.