statutory-emerald•2w ago

Redirection only works in optimistic mode

I am using next js, ant ui, and supabase. The redirection after submission using the useForm hook only works in optimistic mutation mode, no error is given

2 Replies

kapa.ai•2w ago

Hi @GRB221009A. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you are experiencing an issue where redirection after form submission using the useForm hook only works in optimistic mutation mode. Based on the provided knowledge sources, here are some insights and potential solutions: 1. Mutation Modes: - pessimistic: The mutation runs immediately, and redirection and UI updates are executed after the mutation returns successfully. This is the default setting. - optimistic: The mutation is applied locally, and redirection and UI updates are executed immediately as if the mutation is successful. - undoable: The mutation is applied locally, and redirection and UI updates are executed immediately as if the mutation is successful. It waits for a customizable amount of timeout before the mutation is applied. For more details, you can refer to the Mutation Mode documentation (https://refine.dev/docs/advanced-tutorials/mutation-mode/). 2. Redirection Configuration: By default, after a successful mutation, useForm will redirect to the list page. To redirect to a different page, you can either use the redirect function to programmatically specify the destination or set the redirect property in the hook's options. Here is an example of how to use the redirect function:

   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);  
   };

Source: useForm Redirection (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#redirect-1) 3. Known Issues: There have been some known issues related to the useForm hook in different mutation modes: - A bug was reported where the onFinishUpdate promise never settles when in pessimistic mutation mode, causing the form state to remain in isSubmitting indefinitely. This might be related to your issue if the form never completes the submission process in pessimistic mode. - Source: Github Issue #5460 (https://github.com/refinedev/refine/issues/5460) - Another issue was reported where the onMutationSuccess callback from useForm doesn't return data when using the Supabase data provider. - Source: Github Issue #5679 (https://github.com/refinedev/refine/issues/5679) Given these points, you might want to: - Ensure that your form submission completes successfully in pessimistic mode by checking if the onFinish promise resolves or rejects correctly. - Consider using the optimistic mode if it suits your application's needs, as it seems to be working for you. - Keep an eye on the known issues and check if they have been resolved in the latest version of Refine. If you need further assistance, you can refer to the Refine documentation (https://refine.dev/docs/) or raise an issue on the Refine GitHub repository (https://github.com/refinedev/refine/issues). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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