Skip to main content
Version: 3.xx.xx

sorting-live-preview

localhost:3000/products
Live previews only work with the latest documentation.
import { useState } from "react";
import { useInfiniteList, HttpError } from "@pankod/refine-core";

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

const ProductList: React.FC = () => {
const [order, setOrder] = useState<"asc" | "desc">("asc");

const {
data,
isLoading,
isError,
hasNextPage,
fetchNextPage,
isFetchingNextPage
} = useInfiniteList<IProduct, HttpError>({
resource: "products",
config: {
sort: [
{
field: "name",
order,
},
],
},
});

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>
<button
onClick={() =>
setOrder((prev) => (prev === "asc" ? "desc" : "asc"))
}
>
toggle sort
</button>

<ul>
{allPages.map((product) => (
<li key={product.id}>
{product.name} - ({product.material})
</li>
))}
</ul>

{
hasNextPage && (
<button
onClick={() => fetchNextPage()}
disabled={isFetchingNextPage}
>
{isFetchingNextPage ? "Loading more..." : "Load More" }
</button>
)
}
</div>
);
};
Was this helpful?