basic-usage-live-preview

import { useList, HttpError } from "@pankod/refine-core";

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

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

    const products = data?.data ?? [];

    if (isLoading) {
        return <div>Loading...</div>;
    }

    if (isError) {
        return <div>Something went wrong!</div>;
    }

    return (
        <ul>
            {products.map((product) => (
                <li key={product.id}>
                    <h4>
                        {product.name} - ({product.material})
                    </h4>
                </li>
            ))}
        </ul>
    );
};