conventional-tan•10mo ago

Redirect after onMutationSuccess

I want to re-direct after onMutationSuccess after submitting a form. However if I try using go and getToPath nothing will happen despite including the correct values.

5 Replies

kapa.ai•10mo ago

Hi @Todilo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To redirect after a successful form submission in refine, you can use the redirect function provided by the useForm hook. Here's how you can achieve this: 1. First, set the redirect option to false in the useForm hook to prevent the default redirection behavior:

const {
  refineCore: { onFinish, redirect },
  // other properties...
} = useForm({
  refineCoreProps: {
    redirect: false,
  }
});

const {
  refineCore: { onFinish, redirect },
  // other properties...
} = useForm({
  refineCoreProps: {
    redirect: false,
  }
});

2. Then, use the onMutationSuccess callback to handle the redirection after a successful form submission:

const {
  refineCore: { onFinish, redirect },
  // other properties...
} = useForm({
  refineCoreProps: {
    redirect: false,
    onMutationSuccess: (data) => {
      // Redirect to the desired page
      redirect("list"); // or "edit", "show", etc.
    },
  }
});

const {
  refineCore: { onFinish, redirect },
  // other properties...
} = useForm({
  refineCoreProps: {
    redirect: false,
    onMutationSuccess: (data) => {
      // Redirect to the desired page
      redirect("list"); // or "edit", "show", etc.
    },
  }
});

The redirect function accepts two parameters: the redirect type (e.g., "list", "edit", "show") and an optional id parameter for edit or show pages. For more detailed information on using the redirect function, you can refer to the useForm documentation. If you need more control over the redirection process, you can also use the onFinish function directly:

const handleSubmit = (values) => {
  onFinish(values).then(() => {
    redirect("list"); // or any other redirection logic
  });
};

const handleSubmit = (values) => {
  onFinish(values).then(() => {
    redirect("list"); // or any other redirection logic
  });
};

This approach gives you more flexibility to handle the redirection based on your specific requirements. Remember that for the redirection to work properly, you need to have the routerProvider defined in your <Refine> component along with the proper resource definition including routes and actions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@207945811592478720> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

conventional-tanOP•10mo ago

@kapa.ai if I want to use the built in redirect to show, what does the response need to include in order to be able to redirect

kapa.ai•10mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To use the built-in redirect to the "show" page after a successful form submission, the response from the API needs to include the id of the created or updated record. This is because the "show" page typically displays details of a specific record, which is identified by its id. Here's how you can set up the redirect to the "show" page: 1. In your useForm hook, set the redirect option to "show":

const {
  refineCore: { onFinish },
  // other properties...
} = useForm({
  refineCoreProps: {
    redirect: "show",
  }
});

const {
  refineCore: { onFinish },
  // other properties...
} = useForm({
  refineCoreProps: {
    redirect: "show",
  }
});

2. Ensure that your API response includes the id of the created or updated record. The response structure should typically look like this:

{
  "data": {
    "id": "123",
    // other fields...
  }
}

{
  "data": {
    "id": "123",
    // other fields...
  }
}

The id field is crucial for the redirection to work correctly. Refine uses this id to construct the URL for the "show" page. If your API response structure is different, you might need to use a custom onMutationSuccess callback to handle the redirection manually:

const {
  refineCore: { onFinish, redirect },
  // other properties...
} = useForm({
  refineCoreProps: {
    redirect: false,
    onMutationSuccess: (data) => {
      // Assuming the id is nested in the response
      const id = data?.data?.id;
      if (id) {
        redirect("show", id);
      }
    },
  }
});

const {
  refineCore: { onFinish, redirect },
  // other properties...
} = useForm({
  refineCoreProps: {
    redirect: false,
    onMutationSuccess: (data) => {
      // Assuming the id is nested in the response
      const id = data?.data?.id;
      if (id) {
        redirect("show", id);
      }
    },
  }
});

This approach allows you to extract the id from the response and use it for redirection. Remember that for the redirection to work properly, you need to have the routerProvider defined in your <Refine> component and the proper resource definition with the "show" action route configured. For more details on the redirect option and its usage, you can refer to the useForm documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@207945811592478720> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Redirect after onMutationSuccess

Did you find this page helpful?