deep-jade•4w ago

useForm redirects to list instead of show

I am useing useForm with react-hook-form . After successfull submit the user is redirected but to the list page not the show page as I have specified: useForm<MyFormData>({ refineCoreProps: { redirect: "show", resource: "myresource", action: "create", }, })

8 Replies

kapa.ai•4w 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: ---------------------- Based on the information provided in the knowledge sources, it appears that you're encountering an issue with the redirect functionality in useForm when using it with @refinedev/react-hook-form. Let me explain the correct way to set up the redirect and why you might be experiencing this issue. When using useForm from @refinedev/react-hook-form, the redirect property should be placed inside the refineCoreProps object, which you have correctly done. However, there's an important distinction to make: The redirect property in useForm from @refinedev/react-hook-form accepts different values compared to the core useForm. According to the documentation for @refinedev/react-hook-form (https://refine.dev/docs/packages/react-hook-form/use-form/#redirect), the redirect property can be set to false to prevent redirection, but it doesn't mention other options like "show" or "list". To achieve the redirection to the show page after form submission, you have a couple of options: 1. Use the global configuration: You can set up the redirect behavior globally for all forms in your application by configuring the <Refine> component. Here's how you can do it:

   <Refine
     options={{
       redirect: {
         afterCreate: "show",
         // other redirect options...
       },
     }}
     // other Refine props...
   />

   <Refine
     options={{
       redirect: {
         afterCreate: "show",
         // other redirect options...
       },
     }}
     // other Refine props...
   />

This approach is described in the Refine component documentation (https://refine.dev/docs/core/refine-component/#redirect). 2. Use the redirect function: If you need more control over the redirection process, you can use the redirect function returned by useForm. Here's an example:

   const {
     refineCore: { onFinish, redirect },
   } = useForm({
     refineCoreProps: {
       resource: "myresource",
       action: "create",
     },
   });
const handleSubmit = async (data) => {
     const response = await onFinish(data);
     redirect("show", response.data.id);
   };

   const {
     refineCore: { onFinish, redirect },
   } = useForm({
     refineCoreProps: {
       resource: "myresource",
       action: "create",
     },
   });
const handleSubmit = async (data) => {
     const response = await onFinish(data);
     redirect("show", response.data.id);
   };

This approach is mentioned in the react-hook-form useForm documentation (https://refine.dev/docs/packages/react-hook-form/use-form/#return-values). It's worth noting that the behavior you're experiencing (redirecting to the list page instead of the show page) might be the default behavior when the redirect property is not properly recognized or applied. If you continue to face issues, make sure you're using the latest version of @refinedev/react-hook-form and @refinedev/core, as there have been updates and fixes related to redirection behavior in past versions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

deep-jadeOP•4w ago

@kapa.ai unfortunatly the 2. code does not work. I get an error TypeError: Cannot create property 'status' on string

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous answer. Let's address the error you're encountering and provide a correct solution based on the knowledge sources. The error "TypeError: Cannot create property 'status' on string" suggests that there might be an issue with how the redirect function is being used. Let's look at the correct way to use useForm with redirection in @refinedev/react-hook-form. According to the documentation for @refinedev/react-hook-form (https://refine.dev/docs/packages/react-hook-form/use-form/#redirect), the redirect property should be set directly in the refineCoreProps object. Here's the correct way to set it up:

const {
  refineCore: { onFinish, formLoading },
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  refineCoreProps: {
    resource: "myresource",
    action: "create",
    redirect: "show",
  },
});

const {
  refineCore: { onFinish, formLoading },
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  refineCoreProps: {
    resource: "myresource",
    action: "create",
    redirect: "show",
  },
});

In this setup, you don't need to manually handle the redirection. The useForm hook will take care of it based on the redirect value you provide. If you want to have more control over the redirection process, you can set redirect: false and handle it manually after the form submission:

const {
  refineCore: { onFinish, redirect },
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  refineCoreProps: {
    resource: "myresource",
    action: "create",
    redirect: false,
  },
});

const onSubmit = async (data) => {
  const response = await onFinish(data);
  redirect("show", response.data.id);
};

const {
  refineCore: { onFinish, redirect },
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  refineCoreProps: {
    resource: "myresource",
    action: "create",
    redirect: false,
  },
});

const onSubmit = async (data) => {
  const response = await onFinish(data);
  redirect("show", response.data.id);
};

This approach allows you to perform the redirection after the form submission is complete and you have the response data. Remember that for the redirection to work properly, you need to have the appropriate routes set up in your <Refine> component and a router provider configured, as mentioned in the Integration with Routers documentation (https://refine.dev/docs/guides-concepts/forms/#integration-with-routers). If you continue to face issues, please make sure you're using the latest versions of @refinedev/react-hook-form and @refinedev/core, and that your router setup is correct. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

deep-jadeOP•4w ago

@kapa.ai if I use the redirect defined in refineCoreProps . How is the resultit id to be returned for it to work?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To answer your question about how the result ID is returned for the redirect defined in refineCoreProps to work, let's look at the relevant information from the knowledge sources. When using useForm from @refinedev/react-hook-form with the redirect property set in refineCoreProps, the redirection process is handled automatically by the hook. The ID used for redirection is typically obtained from the response of the mutation (create or update) that occurs when the form is submitted. According to the documentation for @refinedev/react-hook-form (https://refine.dev/docs/packages/react-hook-form/use-form/#redirect), you can set up the redirect like this:

const {
  refineCore: { onFinish, formLoading },
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  refineCoreProps: {
    resource: "myresource",
    action: "create",
    redirect: "show",
  },
});

const {
  refineCore: { onFinish, formLoading },
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  refineCoreProps: {
    resource: "myresource",
    action: "create",
    redirect: "show",
  },
});

In this setup, the onFinish function handles the form submission and triggers the appropriate mutation (create or update). The mutation result, including the ID of the created or updated record, is automatically used for redirection. However, it's important to note that for the redirection to work properly: 1. Your data provider must return the created/updated record's ID in the response. 2. The ID should be accessible in the response data structure as expected by refine. If you're experiencing issues with the redirection, it could be due to one of the following reasons: 1. The data provider is not returning the ID in the expected format. 2. The mutation response structure doesn't match what refine expects. To ensure that the ID is correctly returned and used for redirection, you might want to check your data provider implementation and make sure it's returning the created/updated record's ID in the correct format. If you need more control over the redirection process or if you're dealing with a custom data structure, you can use the manual redirection approach as mentioned in the react-hook-form useForm documentation (https://refine.dev/docs/packages/react-hook-form/use-form/#return-values):

const {
  refineCore: { onFinish, redirect },
  // ... other destructured properties
} = useForm({
  refineCoreProps: {
    resource: "myresource",
    action: "create",
    redirect: false, // Disable automatic redirection
  },
});

const onSubmit = async (data) => {
  const response = await onFinish(data);
  // Assuming the ID is in response.data.id
  redirect("show", response.data.id);
};

const {
  refineCore: { onFinish, redirect },
  // ... other destructured properties
} = useForm({
  refineCoreProps: {
    resource: "myresource",
    action: "create",
    redirect: false, // Disable automatic redirection
  },
});

const onSubmit = async (data) => {
  const response = await onFinish(data);
  // Assuming the ID is in response.data.id
  redirect("show", response.data.id);
};

This way, you have full control over when and how the redirection occurs, and you can ensure that the correct ID is used. Remember that for the redirection to work, you need to have the appropriate routes set up in your <Refine> component and a router provider configured, as mentioned in the Integration with Routers documentation (https://refine.dev/docs/guides-concepts/forms/#integration-with-routers). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

useForm redirects to list instead of show

Did you find this page helpful?