two List in the same component

i using the useList, but i need use again in the same component how can i do it?

2 Replies

Hi @mauryo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can use the useList hook multiple times in the same component. Each useList hook can be used to fetch data from a different resource or the same resource with different parameters. Here's an example:

import { useList, HttpError } from "@refinedev/core";  

interface IProduct {  
 id: number;  
 name: string;  
 material: string;  
}  

const ProductList: React.FC = () => {  
 const { data: data1, isLoading: isLoading1, isError: isError1 } = useList<IProduct, HttpError>({  
 resource: "products",  
 });  

 const { data: data2, isLoading: isLoading2, isError: isError2 } = useList<IProduct, HttpError>({  
 resource: "categories",  
 });  

 const products = data1?.data ?? [];  
 const categories = data2?.data ?? [];  

 if (isLoading1 || isLoading2) {  
 return <div>Loading...</div>;  
 }  

 if (isError1 || isError2) {  
 return <div>Something went wrong!</div>;  
 }  

 // Render your products and categories here
};

import { useList, HttpError } from "@refinedev/core";  

interface IProduct {  
 id: number;  
 name: string;  
 material: string;  
}  

const ProductList: React.FC = () => {  
 const { data: data1, isLoading: isLoading1, isError: isError1 } = useList<IProduct, HttpError>({  
 resource: "products",  
 });  

 const { data: data2, isLoading: isLoading2, isError: isError2 } = useList<IProduct, HttpError>({  
 resource: "categories",  
 });  

 const products = data1?.data ?? [];  
 const categories = data2?.data ?? [];  

 if (isLoading1 || isLoading2) {  
 return <div>Loading...</div>;  
 }  

 if (isError1 || isError2) {  
 return <div>Something went wrong!</div>;  
 }  

 // Render your products and categories here
};

In this example, the first useList hook fetches data from the "products" resource, and the second useList hook fetches data from the "categories" resource. You can adjust the resources and parameters as needed for your application. For more information, you can refer to the useList documentation (https://refine.dev/docs/data/hooks/use-list). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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