adverse-sapphire•9mo ago

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•9mo 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•9mo ago

<@943302615452745779> kapa.ai is still learning and improving, please let us know how it did by reacting below

adverse-sapphire•9mo 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.