equal-aqua•13mo ago

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

kapa.ai•13mo ago

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:

const drawerForm = useDrawerForm({  
 modalProps: {  
 autoSubmitClose: true,  
 },  
});

const drawerForm = useDrawerForm({  
 modalProps: {  
 autoSubmitClose: true,  
 },  
});

(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:

<RefreshButton
  resourceName={`stores/${state.storeId}/employees`}
  recordItemId={id}
/>

<RefreshButton
  resourceName={`stores/${state.storeId}/employees`}
  recordItemId={id}
/>

(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: ----------------------

kapa.ai•13mo ago

<@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?

kapa.ai•13mo ago

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:

const { onFinish, redirect } = useForm();  
  
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
 const data = await onFinish(formValues);  
 redirect("show", data?.data?.id);  
};

const { onFinish, redirect } = useForm();  
  
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
 const data = await onFinish(formValues);  
 redirect("show", data?.data?.id);  
};

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: ----------------------

kapa.ai•13mo ago

<@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

kapa.ai•13mo ago

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:

const { formProps } = useDrawerForm({
  action: "edit",
  warnWhenUnsavedChanges: true,
});

const { form } = useForm({
  onSuccess: () => {
    refetch();
  },
});

// Then use this form in your component
<Form {...formProps} form={form} />

const { formProps } = useDrawerForm({
  action: "edit",
  warnWhenUnsavedChanges: true,
});

const { form } = useForm({
  onSuccess: () => {
    refetch();
  },
});

// Then use this form in your component
<Form {...formProps} form={form} />

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: ----------------------

kapa.ai•13mo ago

<@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.

 
const { formProps, saveButtonProps } = useDrawerForm<IComment>({
    action: "create",
    resource: "comments",
    redirect: false,
    warnWhenUnsavedChanges: true,
    onMutationSuccess: () => {
      setOpen(false);
      queryResult.refetch(); //queryResults are from our show element for the post
    },
  });

 
const { formProps, saveButtonProps } = useDrawerForm<IComment>({
    action: "create",
    resource: "comments",
    redirect: false,
    warnWhenUnsavedChanges: true,
    onMutationSuccess: () => {
      setOpen(false);
      queryResult.refetch(); //queryResults are from our show element for the post
    },
  });

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.