quickest-silver•13mo ago

Redirect to resource/show/:id After Creating Said Resource

Hello! I'd like to redirect the user to the newly-created resource after they've created it. How could I go about this? Would it just be useLink, or is there a simpler method?

14 Replies

kapa.ai•13mo 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: ---------------------- Yes, you can achieve this by using the redirect option in the <Refine> component. By default, refine redirects to the list page of the resource after a successful form mutation. However, you can change this behavior based on the form action. Here's an example of how you can set the redirect option to redirect the user to the show page after they've created a new resource:

const App: React.FC = () => {  
 return (  
 <Refine  
 ...  
 options={{  
 redirect: {  
 afterCreate: "show",  
 afterClone: "edit",  
 afterEdit: false,  
 },  
 }}  
 />  
 );  
};

const App: React.FC = () => {  
 return (  
 <Refine  
 ...  
 options={{  
 redirect: {  
 afterCreate: "show",  
 afterClone: "edit",  
 afterEdit: false,  
 },  
 }}  
 />  
 );  
};

In this example, after a successful create action, the user will be redirected to the show page of the newly created resource. If the redirect option is set to false, no redirect is performed after a successful form mutation. Please note that if you don't have a show page and you redirect to the show page, the user will be redirected to the list page. Also, in the undoable and optimistic mutation modes, redirect happens before the mutation succeeds. Therefore, if there is no data in the query cache, the user will be redirected to the list page. You can find more information about this in the refine documentation (https://refine.dev/docs/api-reference/core/components/refine-config). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

quickest-silver•13mo ago

@kapa.ai I've added

options={{
              redirect: {
                afterCreate: "show"
              },
            }}

options={{
              redirect: {
                afterCreate: "show"
              },
            }}

To my <Refine/> component. /show/:id exists for the resource, but it's still redirecting me to the list page. Are the afterClone, afterEdit attributes required?

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- No, the afterClone and afterEdit attributes are not required for the redirect option in the <Refine> component. The afterCreate: "show" option should redirect you to the show page of the newly created resource after a successful create action. However, there are a few things to note: 1. If you don't have a show page and you redirect to the show page, the user will be redirected to the list page. Make sure that the show page for the resource exists and is properly configured. 2. In the undoable and optimistic mutation modes, redirect happens before the mutation succeeds. Therefore, if there is no data in the query cache, the user will be redirected to the list page. If you've checked these points and the issue persists, it might be due to some other configuration or code issue. You can find more information about the redirect option in the <Refine> component in the refine documentation (https://refine.dev/docs/api-reference/core/components/refine-config). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

passive-yellow•13mo ago

Hey @avangeous, last answer of @kapa.ai looks correct 😅 The mutation of the form needs to be done in pessimistic mode to make sure refine has the id. You can set it either globally by using <Refine> component or in useForm hook for that specific call by setting mutationMode: "pessimistic" If your app is already running on pessimistic mutation mode and the issue continues, you may need to check the response of the create mutation, while doing so, you may want to set redirect: false for easier debugging. The response should contain the id property with the correct value of the created item. This is the expected response, if your response has proper id but the redirect is still not happening correctly, we can move this to GitHub issues 🙏 If the issue continues, can you please try to provide a basic repro for us to debug? 🙏

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books:

passive-yellow•13mo ago

But anyways, the mutationMode and the mutation response are the critical parts where I think they will resolve this issue 🚀

kapa.ai•13mo ago

---------------------- Yes, you're correct. The mutation mode of the form needs to be set to pessimistic to ensure that refine has the id of the newly created resource before the redirect happens. You can set this either globally in the <Refine> component or locally in the useForm hook for that specific call. Here's how you can set the mutation mode to pessimistic in the <Refine> component:

<Refine mutationMode="pessimistic" ... />

<Refine mutationMode="pessimistic" ... />

And here's how you can set it in the useForm hook:

useForm({  
 refineCoreProps: {  
 mutationMode: "pessimistic",  
 },  
});

useForm({  
 refineCoreProps: {  
 mutationMode: "pessimistic",  
 },  
});

If your app is already running in pessimistic mutation mode and the issue persists, you might want to check the response of the create mutation. For easier debugging, you can set redirect: false. The response of the create mutation should contain the id property with the correct value of the created item. If your response has the correct id but the redirect is still not happening correctly, it might be a good idea to move this to GitHub issues for further investigation. If the issue continues, providing a basic reproducible example would be very helpful for debugging. You can find more information about the mutationMode and redirect options in the refine documentation (https://refine.dev/docs/api-reference/core/components/refine-config). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

quickest-silver•13mo ago

I figured it had something to do with not getting the id 🤔 I just tried the mutationMode="pessimistic" inside the Refine component like the bot mentioned, but its telling me that Property 'mutationMode' does not exist on type 'IntrinsicAttributes & RefineProps'. I also tried

options={{
              redirect: {
                afterCreate: "show"
              },
              mutationMode: "pessimistic"
            }}

options={{
              redirect: {
                afterCreate: "show"
              },
              mutationMode: "pessimistic"
            }}

but that didn't seem to work. How do I go about setting it globally?

passive-yellow•13mo ago

Passing it inside options is the correct way. Do your create call return the id value of the created entity?

quickest-silver•13mo ago

I believe it does, but let me double check Ahh, found the reason, I hadn't checked the error _app.tsx was showing me 😂 I had two 'options'

passive-yellow•13mo ago

😅