Skip to main content

​
Instalation

npx shadcn add "https://tarcisioandrade.github.io/rich-domain/packages/react-rich-domain/public/r/use-criteria-infinite-query.json"

​
Usage

import { useCriteriaInfiniteQuery } from "@/hooks/use-criteria-infinite-query";

function InfiniteList() {
  const {
    data, // All accumulated data
    pages, // Array of page results
    meta, // Last page metadata
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    // ... all useCriteria methods
  } = useCriteriaInfiniteQuery<User>(
    ["users"],
    getUsers,
    {
      pageSize: 20,
      enabled: true,
    }
  );

  return (
    <div>
      {data.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}

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

​
Features

  • Automatic page accumulation
  • Built-in loading states
  • Proper TypeScript types
  • All useCriteria methods available
  • Seamless React Query integration