How to define custom path and api endpoint pairs?

In my scenario, I have a resource that looks like this:

{
  name: "letters",
  list: "/letters",
  create: "/letters/create",
  edit: "/letters/edit/:id",
  show: "/letters/show/:id",
  meta: {
    canDelete: true,
  },
}

{
  name: "letters",
  list: "/letters",
  create: "/letters/create",
  edit: "/letters/edit/:id",
  show: "/letters/show/:id",
  meta: {
    canDelete: true,
  },
}

However the API endpoints I need to call are different, for example, for the list page I want to call BASE_URL/api/dashboard/getletters I managed to achieve that using resource: "dashboard/allletters" in my custom useDataGrid() call. In this list I add a ShowButton, which links to /letters/show:id which should also call a different endpoint. To implement the Show page I used the first example here: https://refine.dev/docs/api-reference/mui/components/basic-views/show/. My problem is that using useShow with custom resource like this: const { queryResult } = useShow({ resource: "dashboard/getletter" }); the query fails as it asks me to explicitly define id, as it cannot infer it that way, I assume because the resource at the top level is defined as /letters/show:id (which is the URL I want to be structured this way, for the client side). So basically the question is if there is a way to map custom client path with a different api call path, or should I workaround and try to get the id directly from the URL in my Show page? Thanks

3 Replies

kapa.ai•9mo ago

Hi @biohazard1521. 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 map a custom client path with a different API call path in Refine. The resource prop in the useShow hook is used to define the API endpoint path. By default, the useShow hook reads the resource information from the route. If you want to use a custom resource for the useShow hook, you can use the resource prop. However, the useShow hook also requires an id to fetch a specific resource item. If the id is not provided, it will try to infer it from the URL. If it cannot infer the id, it will throw an error asking you to explicitly define the id. You can use the useParsed hook to get the id from the URL. Here's an example:

import { useShow, useParsed } from "@refinedev/core";  
  
const { id } = useParsed();  
  
useShow({  
 resource: "dashboard/getletter",  
 id,  
});

import { useShow, useParsed } from "@refinedev/core";  
  
const { id } = useParsed();  
  
useShow({  
 resource: "dashboard/getletter",  
 id,  
});

In this example, the useShow hook will fetch data from the "dashboard/getletter" resource with the specified id. For more information, you can refer to the useShow documentation (https://refine.dev/docs/api-reference/core/hooks/show/useShow) and the useParsed documentation (https://refine.dev/docs/api-reference/core/hooks/router/useParsed). Sources: - useShow Hook (https://refine.dev/docs/api-reference/core/hooks/show/useShow) - useParsed Hook (https://refine.dev/docs/api-reference/core/hooks/router/useParsed) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

complex-teal•9mo ago

solved using useParsed() ✅