two List in the same component

uncertain-scarlet · 2024-05-08T22:57:23.187Z

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

K

kapa.ai•5/8/24, 10:57 PM

Hi @mauryo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•5/8/24, 10:57 PM

----------------------
You can use the

useList

useList

useList

useList hook multiple times in the same component. Each

useList

useList

useList

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
};

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

useList

useList

useList hook fetches data from the "products" resource, and the second

useList

useList

useList

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

----------------------

K

kapa.ai•5/8/24, 10:57 PM

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