usePages

{
  "items": [
    { "id": 1, "title": "Post 1" },
    { "id": 2, "title": "Post 2" }
  ],
  "meta": { "page": 1, "hasMore": true }
}

function PostList() {
  const { data, loading, canFetchNext, fetchNext, fetchingNext } =
    usePages(
      (api) => api("posts").GET({ query: { page: 1, limit: 20 } }),
      {
        canFetchNext: ({ lastPage }) => lastPage?.data?.meta.hasMore ?? false,
        nextPageRequest: ({ lastPage }) => ({
          query: { page: (lastPage?.data?.meta.page ?? 0) + 1 },
        }),
        merger: (pages) => pages.flatMap((p) => p.data?.items ?? []),
      }
    );

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {data?.map((post) => <PostCard key={post.id} post={post} />)}

      {canFetchNext && (
        <button onClick={fetchNext} disabled={fetchingNext}>
          {fetchingNext ? "Loading..." : "Load More"}
        </button>
      )}
    </div>
  );
}

// For canFetchNext and nextPageRequest
type NextContext<TData, TRequest> = {
  lastPage: InfinitePage<TData> | undefined;
  pages: InfinitePage<TData>[];
  request: TRequest;
};

// For canFetchPrev and prevPageRequest
type PrevContext<TData, TRequest> = {
  firstPage: InfinitePage<TData> | undefined;
  pages: InfinitePage<TData>[];
  request: TRequest;
};

// Each page in the pages array
type InfinitePage<TData> = {
  status: "pending" | "loading" | "success" | "error" | "stale";
  data?: TData;
  error?: TError;
  meta?: TMeta;
  input?: { query?; params?; body? };
};