A Resource, ResourceRelation, or URI string pointing to a collection
The collection items, pagination state, and loading functions
import { Suspense } from 'react';
import { useSuspenseInfiniteCollection, useClient } from '@hateoas-ts/resource-react';
import type { User } from './types';
function ConversationList({ userId }: { userId: string }) {
const client = useClient();
const { items, hasNextPage, loadNextPage, isLoadingMore } =
useSuspenseInfiniteCollection(
client.go<User>(`/api/users/${userId}`).follow('conversations')
);
// No initial loading check - suspends until first page is ready
return (
<div>
{items.map((item) => (
<div key={item.data.id}>{item.data.title}</div>
))}
{hasNextPage && (
<button onClick={loadNextPage} disabled={isLoadingMore}>
{isLoadingMore ? 'Loading...' : 'Load More'}
</button>
)}
</div>
);
}
// Wrap with Suspense boundary
function App() {
return (
<Suspense fallback={<div>Loading conversations...</div>}>
<ConversationList userId="123" />
</Suspense>
);
}
Requires React 19 or later. For React 18, use useInfiniteCollection instead.
Suspense-enabled hook for fetching a paginated collection.
Uses React 19's
use()hook to suspend rendering until the initial collection data is available. The promise is cached in useMemo to ensure the same promise reference is used across React re-renders during suspend (React 19 requirement).