plain-purple•11mo ago

ModalForm - Call Refetch on Success

Hi! I have a modalform using useModalForm, and a separate function refetch(). How could I get refetch to be called when the useModalForm returns a success?

9 Replies

kapa.ai•11mo ago

Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can achieve this by using the onSuccess function in the useModalForm hook. The onSuccess function is called when the form submission is successful. You can call your refetch() function inside onSuccess. Here is an example of how you can do it:

const modalForm = useModalForm({
  onSuccess: () => {
    refetch();
  },
});

const modalForm = useModalForm({
  onSuccess: () => {
    refetch();
  },
});

In this example, refetch() will be called whenever the form submission is successful. For more information, you can refer to the useModalForm documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

plain-purple•11mo ago

@kapa.ai It's telling me that 'onSuccess' does not exist in type 'UseModalFormProps<BaseRecord, HttpError, {}, BaseRecord, BaseRecord, HttpError>'

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. It seems there was a misunderstanding. The useModalForm hook in Refine does not have an onSuccess prop. However, you can achieve the desired effect by using the onSuccess prop in the useForm hook. The useForm hook is used inside the useModalForm hook. Here is an example of how you can do it:

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

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

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

const { formProps } = useModalForm({
  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. For more information, you can refer to the useForm 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•11mo ago

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

plain-purple•11mo ago

@kapa.ai Will this not replace the form in formProps? Won't that cause problems?

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You're correct, my previous example might cause issues as it replaces the form in formProps. I apologize for the confusion. The useForm hook in Refine does not directly support a refetch function. However, you can achieve a similar effect by using the onMutationSuccess prop in the useForm hook. This prop is a callback function that is called after a successful mutation. Here's an example:

const { formProps } = useModalForm({
  action: "edit",
  warnWhenUnsavedChanges: true,
  formOptions: {
    onMutationSuccess: () => {
      refetch();
    },
  },
});

const { formProps } = useModalForm({
  action: "edit",
  warnWhenUnsavedChanges: true,
  formOptions: {
    onMutationSuccess: () => {
      refetch();
    },
  },
});

kapa.ai•11mo ago

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

plain-purple•11mo ago

Got it, bot is slightly off. onMutationSuccess is a property in useModalForm.

const { formProps } = useModalForm({
  action: "edit",
  warnWhenUnsavedChanges: true,
  onMutationSuccess: () => {
    refetch();
  },
});

const { formProps } = useModalForm({
  action: "edit",
  warnWhenUnsavedChanges: true,
  onMutationSuccess: () => {
    refetch();
  },
});