Version: 4.xx.xx
basic-usage-live-preview
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>
);
};