How to type useOne with typings for select prop

How can i call useOne with typings for select prop so i can always extract the propertie data.data

2 Replies

Hi @kraloz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useOne hook in Refine allows you to fetch a single record from your API. You can provide typings for the data you expect to receive from the API. Here's an example of how you can use it:

import { useState } from "react";  
import { useOne, HttpError } from "@refinedev/core";  
  
interface IProduct {  
 id: number;  
 name: string;  
 material: string;  
}  
  
const ProductList: React.FC = () => {  
 const [id, setId] = useState(1);  
  
 const { data, isLoading, isError } = useOne<IProduct, HttpError>({  
 resource: "products",  
 id,  
 });  
  
 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>  
 <p>material: {product?.material}</p>  
  
 <br />  
  
 <button  
 onClick={() => setId((prev) => prev - 1)}  
 disabled={id === 1}  
 >  
 {"<"} Prev Product  
 </button>  
 <button onClick={() => setId((prev) => prev + 1)}>  
 Next Product {">"}  
 </button>  
 </div>  
 );  
};

import { useState } from "react";  
import { useOne, HttpError } from "@refinedev/core";  
  
interface IProduct {  
 id: number;  
 name: string;  
 material: string;  
}  
  
const ProductList: React.FC = () => {  
 const [id, setId] = useState(1);  
  
 const { data, isLoading, isError } = useOne<IProduct, HttpError>({  
 resource: "products",  
 id,  
 });  
  
 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>  
 <p>material: {product?.material}</p>  
  
 <br />  
  
 <button  
 onClick={() => setId((prev) => prev - 1)}  
 disabled={id === 1}  
 >  
 {"<"} Prev Product  
 </button>  
 <button onClick={() => setId((prev) => prev + 1)}>  
 Next Product {">"}  
 </button>  
 </div>  
 );  
};

In this example, IProduct is the interface that describes the shape of the data you expect to receive from the API. The useOne hook is then called with this interface as a type parameter. This allows you to access the data.data property with full TypeScript support. For more information, you can refer to the useOne documentation (https://refine.dev/docs/api-reference/core/hooks/data/useOne/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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