How to autosave?
I'd like to create a form that autosaves the changed content to my data provider. How do I best achieve this within the refine framework?
10 Replies
Hi @imedemi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To create a form that autosaves the changed content to your data provider within the refine framework, you can use the
useForm
hook and the saveButtonProps
variable. Here's an example of how to achieve this:
1. Import the necessary components and hooks:
2. Use the useForm
hook and destructure the saveButtonProps
variable:
3. Pass the saveButtonProps
to the <SaveButton>
component, which includes submitting the form action, button loading, and disable states:
In this example, the form will submit the changes to your data provider when the save button is clicked. If you want to autosave the form without clicking the save button, you can add an onChange
event to the form fields and trigger the handleSubmit(onFinish)
function when the content changes.
For more information, refer to the SaveButton documentation (https://refine.dev/docs/api-reference/mui/components/buttons/save-button).
Keep in mind that this example uses MUI components, but you can achieve similar functionality with Ant Design components if you prefer.
Please note that the provided code snippets are based on the information extracts. Make sure to adapt them to your specific use case and refine setup.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@711407420718579741> kapa.ai is still learning and improving, please let us how it did by reacting below
yappiest-sapphire•2y ago
Hey @imedemi,
Which UI framework are you using?
automatic-azure•2y ago
Material UI.
yappiest-sapphire•2y ago
Can you try like this:
automatic-azure•2y ago
I get a typescript error for
const subscription = watch(handleSubmit(onFinish));
yappiest-sapphire•2y ago
You can use generic types of
useForm
hook to resolve errors.
You can see an example here: https://github.com/refinedev/refine/blob/next/examples/form-mui-use-form/src/pages/posts/edit.tsx#L17-L22automatic-azure•2y ago
Thank you, @salihozdemir. I finally got it working and it works like a charm!
I needed to also make the page be an "edit" resource instead of "show" in order to update the existing resource instead of creating a new one.
Now I just need to turn off the "Successfully updated notification and it will be behaving as I expect for an auto-save.
yappiest-sapphire•2y ago
You can disable notifications with
successNotification
and errorNotification
props. Just set the false
them.automatic-azure•2y ago
Yay! That worked. Thank you.
For others following this thread, successNotification seems like it needs to be defined from within the refineCoreProps.