useCriteriaInfiniteQuery

A specialized hook for infinite scroll patterns using React Query’s useInfiniteQuery.

Instalation

npm

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