> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sublay.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Use collection entities

> Fetch and paginate entities saved in a collection

## Overview

`useCollectionEntitiesWrapper` fetches the paginated list of entities saved in a collection. It supports multiple sort modes and infinite-scroll pagination via `loadMore`.

If no `collectionId` is passed, it defaults to the current collection from the Redux collections state (i.e., whatever `useCollections` is currently navigated to).

## Usage Example

```tsx theme={null}
import { useCollectionEntitiesWrapper } from "@sublay/react-js";

function SavedFeed({ collectionId }) {
  const {
    entities,
    loading,
    hasMore,
    sortBy,
    setSortBy,
    loadMore,
    refetch,
  } = useCollectionEntitiesWrapper({
    collectionId,
    defaultSortBy: "added",
    defaultSortDir: "desc",
    limit: 20,
  });

  return (
    <div>
      <select value={sortBy} onChange={(e) => setSortBy(e.target.value as any)}>
        <option value="added">Recently Added</option>
        <option value="new">Newest</option>
        <option value="top">Top Voted</option>
      </select>
      <ul>
        {entities.map((entity) => (
          <li key={entity.id}>{entity.title}</li>
        ))}
      </ul>
      {hasMore && (
        <button onClick={loadMore} disabled={loading}>
          Load more
        </button>
      )}
    </div>
  );
}
```

## Parameters

<ParamField body="collectionId" type="string | null" optional>
  The collection to fetch entities from. Defaults to the current collection in Redux state.
</ParamField>

<ParamField body="limit" type="number" optional>
  Number of entities per page. Default: `20`.
</ParamField>

<ParamField body="defaultSortBy" type="&#x22;new&#x22; | &#x22;top&#x22; | &#x22;hot&#x22; | &#x22;added&#x22;" optional>
  Initial sort mode. Default: `"added"` (sorted by when the entity was saved).
</ParamField>

<ParamField body="defaultSortByReaction" type="SortByReaction" optional>
  Initial reaction type `top` ranks by: `"upvote"`, `"downvote"`, `"like"`, `"love"`, `"wow"`, `"sad"`, `"angry"`, or `"funny"`. Only sent while `sortBy` is `"top"`. Default: `"upvote"`.
</ParamField>

<ParamField body="defaultSortDir" type="&#x22;asc&#x22; | &#x22;desc&#x22;" optional>
  Initial sort direction. Default: `"desc"`.
</ParamField>

<ParamField body="include" type="CollectionEntityIncludeParam" optional>
  Optional associations to include with each entity: `"user"`, `"space"`, `"topComments"`, `"files"`, `"grants"`. `"saved"` isn't accepted: every entity returned already has `isSaved: true`. On an entity whose author has blocked the user (saved before the block), `topComments` is `[]`.
</ParamField>

<ParamField body="topCommentsLimit" type="number" optional>
  With `"topComments"` included: how many top comments per entity. Server default `1`, maximum `5`. Not sent when `include` doesn't contain `"topComments"`.
</ParamField>

<ParamField body="topCommentsSortByReaction" type="ReactionType" optional>
  With `"topComments"` included: the reaction whose raw count ranks the top comments. Server default `"upvote"`. Not sent when `include` doesn't contain `"topComments"`.
</ParamField>

## Returns

<ResponseField name="entities" type="Entity[]">
  The current list of fetched entities. Appended to on each `loadMore` call.
</ResponseField>

<ResponseField name="loading" type="boolean">
  `true` while fetching the initial page or loading more.
</ResponseField>

<ResponseField name="hasMore" type="boolean">
  `true` if additional pages are available.
</ResponseField>

<ResponseField name="sortBy" type="&#x22;new&#x22; | &#x22;top&#x22; | &#x22;hot&#x22; | &#x22;added&#x22;">
  Current sort mode.
</ResponseField>

<ResponseField name="sortByReaction" type="SortByReaction">
  Current reaction type `top` ranks by.
</ResponseField>

<ResponseField name="sortDir" type="&#x22;asc&#x22; | &#x22;desc&#x22;">
  Current sort direction.
</ResponseField>

<ResponseField name="setSortBy" type="(sortBy: 'new' | 'top' | 'hot' | 'added') => void">
  Change the sort mode. Resets the entity list and re-fetches from page 1.
</ResponseField>

<ResponseField name="setSortByReaction" type="(sortByReaction: SortByReaction) => void">
  Change which reaction `top` ranks by. Resets the entity list and re-fetches from page 1.
</ResponseField>

<ResponseField name="setSortDir" type="(sortDir: 'asc' | 'desc') => void">
  Change the sort direction. Resets the entity list and re-fetches from page 1.
</ResponseField>

<ResponseField name="loadMore" type="() => void">
  Load the next page of entities. Appends to the existing list.
</ResponseField>

<ResponseField name="refetch" type="() => void">
  Reset and re-fetch from page 1.
</ResponseField>

## Sort Modes

| Value | Description |
| - | - |
| `added` | Sorted by when the entity was added to the collection |
| `new` | Sorted by entity creation date |
| `top` | Sorted by reaction count — upvotes by default, or the reaction set with `sortByReaction` |
| `hot` | Sorted by hot score (engagement-based) |

The whole collection is sorted before it is paginated, so `loadMore` continues the same order.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.