How to define custom path and api endpoint pairs?
In my scenario, I have a resource that looks like this:
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?
Thanks3 Replies
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:
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:
----------------------<@680514070167683118> kapa.ai is still learning and improving, please let us know how it did by reacting below
unwilling-turquoiseOP•13mo ago
solved using
useParsed()
✅