Basic Usage Live Preview

body {
  padding: 4px;
  background: white;
}

setInitialRoutes(["/products"]);

// visible-block-start
import { useList, HttpError } from "@refinedev/core";

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

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

  const products = result.data ?? [];

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

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

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

// visible-block-end

setRefineProps({
  resources: [
    {
      name: "products",
      list: "/products",
    },
  ],
});

render(
  <ReactRouter.BrowserRouter>
    <RefineHeadlessDemo>
      <ReactRouter.Routes>
        <ReactRouter.Route path="/products" element={<ProductList />} />
      </ReactRouter.Routes>
    </RefineHeadlessDemo>
  </ReactRouter.BrowserRouter>,
);