A Resource, ResourceRelation, or URI string pointing to a collection
Collection items, loading state, pagination info, and loadNextPage function
import { useInfiniteCollection, useClient } from '@hateoas-ts/resource-react';
import type { User, Conversation } from './types';
function ConversationList({ userId }: { userId: string }) {
const client = useClient();
const userResource = client.go<User>(`/api/users/${userId}`);
const { items, loading, hasNextPage, error, loadNextPage } =
useInfiniteCollection(userResource.follow('conversations'));
return (
<div>
{items.map((item) => (
<div key={item.data.id}>{item.data.title}</div>
))}
{loading && <div>Loading...</div>}
{hasNextPage && !loading && (
<button onClick={loadNextPage}>Load More</button>
)}
</div>
);
}
Hook for managing infinite scroll/pagination of HATEOAS collection resources.
Automatically fetches the initial page and provides functions to load subsequent pages. Uses HAL "next" links for pagination. Items are accumulated across pages.