Skip to main content

​
Overview

useFetchManyCommentsWrapper is a stateful wrapper around useFetchManyComments that manages pagination, sort state, and the comment list for you. Use it when you need a custom paginated comment list outside of CommentSectionProvider — for example, a user profile page showing all comments a user has made, or a custom thread viewer. Changing sortBy resets the list and re-fetches from page 1. At least one of entityId, userId, or parentId must be provided — the hook will not fetch otherwise.

​
Usage Example

import { useFetchManyCommentsWrapper } from "@replyke/react-js";

function UserComments({ userId }: { userId: string }) {
  const {
    comments,
    loading,
    hasMore,
    sortBy,
    setSortBy,
    loadMore,
  } = useFetchManyCommentsWrapper({
    userId,
    limit: 10,
    defaultSortBy: "new",
    include: ["entity"],
  });

  return (
    <div>
      <select value={sortBy ?? ""} onChange={(e) => setSortBy(e.target.value as any)}>
        <option value="new">Newest</option>
        <option value="top">Top</option>
        <option value="controversial">Controversial</option>
      </select>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>{comment.content}</li>
        ))}
      </ul>
      {hasMore && (
        <button onClick={loadMore} disabled={loading}>
          Load more
        </button>
      )}
    </div>
  );
}

​
Parameters

​
entityId
string | null
Filter to comments on a specific entity.
​
userId
string | null
Filter to comments by a specific user.
​
parentId
string | null
Filter to replies of a specific parent comment.
​
sourceId
string | null
Filter to comments within a specific source.
​
limit
number
Number of comments per page. Default: 10.
​
defaultSortBy
"new" | "top" | "controversial"
Initial sort order. Default: "new".
​
include
CommentIncludeParam
Populate related data. Accepted values: "user", "entity", "space", "parent".

​
Returns

​
comments
Comment[]
The current list of fetched comments. Appended to on each loadMore call.
​
loading
boolean
true while fetching the initial page or loading more.
​
hasMore
boolean
true if additional pages are available.
​
sortBy
CommentsSortByOptions | null
Current sort order.
​
setSortBy
(sortBy: CommentsSortByOptions) => void
Change the sort order. Resets the comment list and re-fetches from page 1.
​
loadMore
() => void
Load the next page of comments. Appends to the existing list.