useShow() id is NaN
Hi! I have a page located at companies/show/:id. It's retrieving data using --
const { queryResult } = useShow()
For some reason, when it's first loaded, id is NaN. However, this is the only page that does so. I'm wondering what the causes of this could be?8 Replies
Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
useShow
hook in refine is designed to fetch a single record from the API. By default, it tries to read the resource
and id
values from the current URL. If the id
is returning NaN
, it could be due to a few reasons:
1. The id
in the URL is not properly formatted or is not a number. Ensure that the id
in the URL is a valid number.
2. If you're defining resource
and id
on the hook, ensure that these properties are correctly set. If these properties are changed, the useShow
hook will trigger a new request.
3. If you're using the useShow
hook in a custom page, you might need to pass the id
value using the recordItemId
property. The Show
component reads the id
information from the route by default. recordItemId
is used when it cannot read from the URL.
Here's an example of how to use recordItemId
:
If none of these solutions work, you might want to check your routing configuration or any other custom logic that might interfere with the id
retrieval.
For more information, you can refer to the useShow documentation (https://refine.dev/docs/api-reference/core/hooks/show/useShow) and the Show component documentation (https://refine.dev/docs/api-reference/mui/components/basic-views/show).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below
conscious-sapphire•13mo ago
@kapa.ai When useShow() isn't passed anything and the page is located at the show: route defined in app.tsx, how does it usually get the id?
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useShow
hook in refine retrieves the id
from the current URL by default. If you don't pass anything to useShow()
, it will try to read the resource
and id
values from the current URL.
For example, if your page is located at <http://localhost:3000/products/show/1
,> useShow()
will automatically extract the id
value 1
from the URL.
Here's an example of how useShow
is used:
In this example, useShow()
is used without any parameters, so it will automatically extract the id
from the URL.
For more information, you can refer to the useShow documentation (https://refine.dev/docs/api-reference/core/hooks/show/useShow).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below
conscious-sapphire•13mo ago
@kapa.ai How does it extract the id?
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useShow
hook in refine uses the useParams
hook from React Router under the hood to extract the id
from the URL. The useParams
hook allows you to access the URL parameters from a current route.
For example, if you have a route defined as /products/show/:id
, and you navigate to /products/show/1
, useParams
will return an object that includes { id: "1" }
.
In the context of useShow
, it uses this id
to fetch the corresponding record from your data provider. It's important to note that the id
is extracted as a string, and you may need to convert it to a number or other types depending on your data provider's requirements.
For more information, you can refer to the useShow documentation (https://refine.dev/docs/api-reference/core/hooks/show/useShow) and the React Router useParams documentation (https://reactrouter.com/web/api/Hooks/useparams).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below