how to request api nested dynamic route

2 Replies

Hi @japope. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To request an API with a nested dynamic route in refine, you can use the resource property on data hooks. The resource property acts as the URL for the request. If you have dynamic parameters in your URL, you can use the useParsed hook to extract these parameters from the URL. Here's an example of how to make a request to a nested dynamic route like /api/admin/stores/{STORE_ID}/employees/{ID}: 1. Using useTable Hook:

   import { useTable } from "@refinedev/core";
   
   const { params } = useParsed(); // Extract dynamic parameters from the URL

   useTable({
     resource: `/api/admin/stores/${params.storeId}/employees/${params.employeeId}`,
   });

   import { useTable } from "@refinedev/core";
   
   const { params } = useParsed(); // Extract dynamic parameters from the URL

   useTable({
     resource: `/api/admin/stores/${params.storeId}/employees/${params.employeeId}`,
   });

2. Using useOne Hook:

   import { useOne } from "@refinedev/core";
   
   const { params } = useParsed(); // Extract dynamic parameters from the URL

   useOne({
     resource: `/api/admin/stores/${params.storeId}/employees/${params.employeeId}`,
   });

   import { useOne } from "@refinedev/core";
   
   const { params } = useParsed(); // Extract dynamic parameters from the URL

   useOne({
     resource: `/api/admin/stores/${params.storeId}/employees/${params.employeeId}`,
   });

3. Defining Nested Routes in Resources: When defining nested routes in your resources, ensure that you use distinct parameter names to avoid conflicts. For example:

   const resources = [
     {
       name: 'stores',
       list: '/stores',
       show: '/stores/:storeId',
       edit: '/stores/:storeId/edit',
     },
     {
       name: 'employees',
       list: '/stores/:storeId/employees',
       show: '/stores/:storeId/employees/:employeeId',
       edit: '/stores/:storeId/employees/:employeeId/edit',
       meta: {
         dataProviderName: 'employees',
         parent: 'stores',
         hide: true,
       },
     }
   ];

   const resources = [
     {
       name: 'stores',
       list: '/stores',
       show: '/stores/:storeId',
       edit: '/stores/:storeId/edit',
     },
     {
       name: 'employees',
       list: '/stores/:storeId/employees',
       show: '/stores/:storeId/employees/:employeeId',
       edit: '/stores/:storeId/employees/:employeeId/edit',
       meta: {
         dataProviderName: 'employees',
         parent: 'stores',
         hide: true,
       },
     }
   ];

This setup ensures that the storeId and employeeId parameters are correctly substituted in the URL. For more detailed information, you can refer to the refine documentation on requesting an API with nested routes (https://refine.dev/docs/guides-concepts/faq/#how-can-i-request-an-api-with-nested-route) and defining nested routes with multiple parameters (https://refine.dev/docs/guides-concepts/multi-tenancy/#configuring-multi-tenant-routes). If you encounter any issues or need further assistance, feel free to open a new 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•4w ago

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