Using response data in errorNotification useForm
Hello, My REST API sends a JSON with explanation of what's wrong with the response when request fails(4xx response code) . How do I use that response data inside errorNotification property of useForm hook? In
error
argument I only have an Error object, not the response data.26 Replies
Hey @metammodern! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation (https://refine.dev/docs) for more information on how to handle specific scenarios with the hooks provided by refine.
----------------------
Overview | refine
What is refine?
<@689885255921827855> kapa.ai is still learning and improving, please let us how it did by reacting below
flat-fuchsiaOP•2y ago
Okay, nevermind, I found out how to do it. There is a response object in that error.
Is there a way to add correct typings for the errorNotification and successNotification functions in useForm?

yappiest-sapphire•2y ago
Hey @metammodern,
You can checkout our
useForm
doc and see errorNotification
and successNotification
sections here:
https://refine.dev/docs/api-reference/core/hooks/useForm/#errornotification
Also, you can see useForm
type params in here:
https://refine.dev/docs/api-reference/core/hooks/useForm/#type-parameters
You can give types like following:
flat-fuchsiaOP•2y ago
Thank you. In v3.x.x.x do those type pass into functions correctly? Because for all parameters I have "unknown" type.
Also, I saw the documentation, it lacks examples of using response data
yappiest-sapphire•2y ago
All of them avaible in v3.
Actually, all of generics has default types different from “unknown”.
I think this must be what you're looking at: https://refine.dev/docs/api-reference/core/providers/data-provider/#error-format
Data Provider | refine
The data provider acts as a data layer for your app that makes the HTTP requests and encapsulates how the data is retrieved. refine consumes these methods via data hooks.
flat-fuchsiaOP•2y ago
Huh, that's odd
Okay, I'll provide screenshots tomorrow of what I see in vscode
flat-fuchsiaOP•2y ago
@salihozdemir here's what I get

flat-fuchsiaOP•2y ago
But I see that in d.ts in refine it's generic. So maybe I just wrote something incorrectly.
yappiest-sapphire•2y ago
Hey @metammodern,
You're absolutely right, it's a bug. We missed to pass generic types to
SuccessErrorNotification
interface. You can see in here: https://github.com/refinedev/refine/blob/next/packages/core/src/hooks/form/useForm.ts#L140
Can you create an PR for this?
All you have to do is change this line:
flat-fuchsiaOP•2y ago
Okay, will do
Will the update go to v3 or v4?
yappiest-sapphire•2y ago
flat-fuchsiaOP•2y ago
@salihozdemir https://github.com/refinedev/refine/pull/3965
GitHub
WIP: Update Generic Typings for useForm and useCustomMutation Notif...
IMPORTANT: Please do not create a Pull Request without creating an issue first.
Any change needs to be discussed before proceeding. Failure to do so may result in the rejection of the pull request....
yappiest-sapphire•2y ago
Thanks, we'll review your request and contact you shortly 🚀
flat-fuchsiaOP•2y ago
@salihozdemir hi, Is there any way to declare templates for notifications at some high level? My API always gives same sceme for when success and when error happens. I don't feel like copypastings errorNotification function in every useForm call. Even that I extracted function into a reusable util, I still have to put it into every useForm call.
@salihozdemir ?
yappiest-sapphire•2y ago
Hey @metammodern,
Sorry for the late reply. There is a way to do for error notifications.
You can find more information here: https://refine.dev/docs/api-reference/core/providers/data-provider/#error-format
However, there is no way to do it for success notifications yet. Can you please create an issue for it? We will investigate it and see if is possible to add it.
flat-fuchsiaOP•2y ago
Thank you @salihozdemir , so I'll have to rewrite some methods of data provider, right? And just map whatever error comes to HTTPError fields. And the in useForm I don't have to write errorNotification, it will work on itself. Hope I got it right, thank you)
For success: I'll see if it's possible to ignore I'll ignore. Shouldn't be hard
But wait, @salihozdemir , the HTTPError object has only message and status fields. The notification, however, has also a description field and my backend sends description as well.
Techincally API sends this object {error: string, message: string}
And I use it like on screenshot above
flat-fuchsiaOP•2y ago
aaalright, from sources I see that you use statusCode in description field
and message value as description.
That's a bit misleading :)) but it's okay

yappiest-sapphire•2y ago
I'm glad to hear that, However, you're right, it doesn't enough to cover every case. Globally, there must be a way to handle all notification in a single place. We'll be very happy if you open an issue with your suggestion 🙏
flat-fuchsiaOP•2y ago
Okay, will do @salihozdemir . I already have a bunch of issues to create in your repo hehe.
But one last thing to finish my task:
Can you please tell how do I customize this modal when deleting an resource item?and also this notification. I want it to show which resource name was deleted(or resource id, depending on use case)


yappiest-sapphire•2y ago
You can use swizzle command for customization our components. In your case, you need to customize the
DeleteButton
.
You can find more info here: https://refine.dev/docs/packages/documentation/cli/#swizzle
For notifications, you check out this: https://refine.dev/docs/examples/notification-provider/react-toastify/
You can handle your notifications with any notification libraries using notificationProvider
.flat-fuchsiaOP•2y ago
Yes, I know about the notificationProvider, I was talking more about still using the same default provider, just changing the text. Probably swizzle is what I need, but I get this error:
I'll try to find the reason, I had it before as well

flat-fuchsiaOP•2y ago
@salihozdemir I didn't find the reason. Should I create an issue?
yappiest-sapphire•2y ago
Of course, you can create an issue. Just make sure to include the information to reproduce the problem.
flat-fuchsiaOP•2y ago
Okay done. Closing this thread as resolved. Thank you