can useDrawerForm just refresh current page instead of redirecting to the list page?
using Ant Design I have a useDrawerForm to submit a comment. The comment is on the show page of the item that is being commented on. After pressing the save button the page is refreshed back to the comment list, I would rather the comment drawer close and the current show page just be refreshed is that possible?
10 Replies
Hi @erekyu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, it is possible to achieve this behavior using the
useDrawerForm
hook in Ant Design with Refine. You can control the behavior of the drawer after form submission using the autoSubmitClose
property. When autoSubmitClose
is set to true
, the drawer will close after a successful form submission. This is the default behavior.
Here is an example of how you can use it:
(Source: Refine Documentation (https://refine.dev/docs/api-reference/mantine/hooks/form/useDrawerForm/#autosubmitclose))
As for refreshing the current show page, you can use the RefreshButton
component provided by Refine. This component triggers a refetch of the data for the current page when clicked. You can programmatically trigger a click event on this button after the form submission to refresh the data on the page.
Here is an example of how you can use the RefreshButton
:
(Source: Github Issue (https://github.com/refinedev/refine/issues/1729))
Please note that the RefreshButton
needs the id
information to work properly. The id
can be obtained from the URL or passed as a prop if the component is used on a custom page, modal, or drawer.
(Source: Refine Documentation (https://refine.dev/docs/api-reference/antd/components/basic-views/show/#recorditemid))
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@66380739771379712> kapa.ai is still learning and improving, please let us know how it did by reacting below
equal-aquaOP•13mo ago
@kapa.ai how do i stop the useDrawerForm save button from redirecting to the list page after successful submit?
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useDrawerForm
hook in Refine uses the useForm
hook under the hood, which by default redirects to the "list" page after a successful mutation. However, you can control this behavior by using the redirect
function or the redirect
property in the hook's options.
Here's an example of how you can use the redirect
function to stay on the current page after a successful mutation:
In this example, onFinish
is used to handle the form submission and redirect
is used to redirect to a specific page. The redirect
function takes two arguments: the name of the page to redirect to and the id of the data.
You can find more information about this in the useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm).
(Source: Discord support thread: useCreateMany redirect onSuccess > Answers (https://discord.com/channels/837692625737613362/1168133810827837531))
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@66380739771379712> kapa.ai is still learning and improving, please let us know how it did by reacting below
equal-aquaOP•13mo ago
@kapa.ai is it possible to trigger the refresh when the useDrawerForm is successful? I have set the redirect to fasle and now just need to refresh the page so the new data that was submitted is included
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, it is possible to trigger a refresh when the
useDrawerForm
is successful. You can achieve this by using the onSuccess
prop in the useForm
hook. The useForm
hook is used inside the useDrawerForm
hook. The onSuccess
prop is a callback function that is called after a successful mutation.
Here is an example of how you can do it:
In this example, refetch()
will be called whenever the form submission is successful. This will trigger a refresh of the data on the page.
(Source: Discord support thread: ModalForm - Call Refetch on Success (https://discord.com/channels/837692625737613362/1164371092698316810))
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@66380739771379712> kapa.ai is still learning and improving, please let us know how it did by reacting below
extended-salmon•13mo ago
Hello @erekyu was the bot's answer helpful?
equal-aquaOP•13mo ago
No, it told me to refetch(); but didn't tell me how to call it. It also had a few weird ways of going about handling the redirect when all that was needed is redirect: false. Below is the code I ended up using and it works like a charm, I have a useState for opening and closing the drawer this allows me to close the drawer on a successful submission but keeps it open if the submission was unsuccessful so it can be edited.
I will say that had it not provided me a link as to where in the docs I should look I wouldn't have been able to find what I needed to get it working as I was drawing huge blanks when searching the docs on my own.