Nested resources

How can I nest a resource route in another resource?

8 Replies

kapa.ai•13mo ago

Hi @.chasel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can nest a resource route in another resource by defining actions (list, create, edit, show, clone) as paths rather than components in your resources prop. This allows you to define custom routes for individual actions and use your router’s full potential without being restricted to the automatically created routes. Here's an example of how you can define nested routes and parameters for your resources:

resources={[  
 {  
 name: "products",  
 list: "/:tenantId/products",  
 show: "/:tenantId/products/:id",  
 edit: "/:tenantId/products/:id/edit",  
 create: "/:tenantId/products/create",  
 }  
]}

resources={[  
 {  
 name: "products",  
 list: "/:tenantId/products",  
 show: "/:tenantId/products/:id",  
 edit: "/:tenantId/products/:id/edit",  
 create: "/:tenantId/products/create",  
 }  
]}

In this example, the detail page of a product can have a nested structure and additional parameters, which can be passed along with the meta properties in hooks and components. When constructing the navigation path, existing parameters in the URL will also be used. Remember, this is only a resource definition, which must be handled within your router structure. For more details, you can refer to the migration guide from 3.x.x to 4.x.x (https://refine.dev/docs/migration-guide/3x-to-4x) in the refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

modern-teal•13mo ago

@kapa.ai you only defined one resource though? If you define two resources with one nested in the other, how do you handle needing two params named :id

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In refine, you can define multiple resources with nested routes and use different parameters for each resource. The :param syntax is used to define parameters in your routes. If you have two resources and each requires an id, you can differentiate them by using different parameter names. For example, if you have a users resource and a posts resource, and you want to nest posts within users, you can define the show action for each resource like this:

resources={[  
 {  
 name: "users",  
 show: "/users/:userId",  
 },
 {  
 name: "posts",  
 show: "/users/:userId/posts/:postId",  
 }  
]}

resources={[  
 {  
 name: "users",  
 show: "/users/:userId",  
 },
 {  
 name: "posts",  
 show: "/users/:userId/posts/:postId",  
 }  
]}

In this example, :userId is the parameter for the users resource and :postId is the parameter for the posts resource. This way, you can handle needing two parameters named id by giving them unique names (userId and postId). For more details, you can refer to the tutorial on understanding resources (https://refine.dev/docs/tutorial/understanding-resources/index) and the documentation on routers (https://refine.dev/docs/packages/documentation/routers/react-router-v6) in the refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

modern-teal•13mo ago

@kapa.ai name it userId instead of id in the resource object will throw an error because refine can’t recognize that userId is an id

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. You're correct. In refine, the id field is expected in the resource object. If you name it as userId, it might not be recognized. When defining nested routes, the parameters in the URL (:userId, :postId) are just placeholders and don't have to match the actual id field in your resource objects. These parameters are used to capture the dynamic parts of the URL. Here's an example of how you can define nested routes for your resources:

resources={{[  
 {{  
 name: "users",  
 list: "/users",  
 show: "/users/:id",  
 edit: "/users/:id/edit",  
 create: "/users/create",  
 }},
 {{  
 name: "posts",  
 list: "/users/:userId/posts",  
 show: "/users/:userId/posts/:id",  
 edit: "/users/:userId/posts/:id/edit",  
 create: "/users/:userId/posts/create",  
 }}  
]}}

resources={{[  
 {{  
 name: "users",  
 list: "/users",  
 show: "/users/:id",  
 edit: "/users/:id/edit",  
 create: "/users/create",  
 }},
 {{  
 name: "posts",  
 list: "/users/:userId/posts",  
 show: "/users/:userId/posts/:id",  
 edit: "/users/:userId/posts/:id/edit",  
 create: "/users/:userId/posts/create",  
 }}  
]}}

In this example, :id is the parameter for the users resource and :id is also the parameter for the posts resource. However, the posts resource is nested within the users resource, so it also includes a :userId parameter in its routes. For more details, you can refer to the migration guide from 3.x.x to 4.x.x (https://refine.dev/docs/migration-guide/3x-to-4x) in the refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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