conscious-sapphire•13mo ago

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

kapa.ai•13mo ago

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:

import { Show } from "@refinedev/mui";  
  
const CustomPage: React.FC = () => {  
 return (  
 <Show resource="posts" recordItemId={123}>  
 <span>Rest of your page here</span>  
 </Show>  
 );  
};

import { Show } from "@refinedev/mui";  
  
const CustomPage: React.FC = () => {  
 return (  
 <Show resource="posts" recordItemId={123}>  
 <span>Rest of your page here</span>  
 </Show>  
 );  
};

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: ----------------------

kapa.ai•13mo ago

<@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?

kapa.ai•13mo ago

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:

import { useShow } from "@refinedev/core";  
  
const ProductShow: React.FC = () => {  
 const { queryResult } = useShow();  
  
 const { data, isLoading, isError } = queryResult;  
 const product = data?.data;  
  
 if (isLoading) {  
 return <div>Loading...</div>;  
 }  
  
 if (isError) {  
 return <div>Something went wrong!</div>;  
 }  
  
 return (  
 <div>  
 <h3>Product Details</h3>  
 <p>id: {product?.id}</p>  
 <p>name: {product?.name}</p>  
 </div>  
 );  
};

import { useShow } from "@refinedev/core";  
  
const ProductShow: React.FC = () => {  
 const { queryResult } = useShow();  
  
 const { data, isLoading, isError } = queryResult;  
 const product = data?.data;  
  
 if (isLoading) {  
 return <div>Loading...</div>;  
 }  
  
 if (isError) {  
 return <div>Something went wrong!</div>;  
 }  
  
 return (  
 <div>  
 <h3>Product Details</h3>  
 <p>id: {product?.id}</p>  
 <p>name: {product?.name}</p>  
 </div>  
 );  
};

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: ----------------------

kapa.ai•13mo ago

<@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?

kapa.ai•13mo ago

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: ----------------------

kapa.ai•13mo ago

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