Skip to main content
Version: 4.xx.xx

basic-usage-live-preview

localhost:3000/categories
import React from "react";
import { useInfiniteList } from "@refinedev/core";

const PostList = () => {
const {
data,
isError,
isLoading,
hasNextPage,
fetchNextPage,
isFetchingNextPage,
} = useInfiniteList({
resource: "categories",
pagination: {
pageSize: 4,
},
});

if (isLoading) {
return <p>Loading</p>;
}
if (isError) {
return <p>Something went wrong</p>;
}

const allPages = [].concat(...(data?.pages ?? []).map((page) => page.data));

return (
<div>
<ul>
{allPages.map(({ id, title }) => (
<li key={id}>
{id}.{title}
</li>
))}
</ul>
{hasNextPage && (
<button
onClick={() => fetchNextPage()}
disabled={isFetchingNextPage}
>
{isFetchingNextPage ? "Loading more..." : "Load More"}
</button>
)}
</div>
);
};