Use Fetch Followers By User Id

useFetchFollowersByUserId

Overview

The useFetchFollowersByUserId hook fetches the list of users who are following a specific user. This is a public endpoint that allows you to view any user’s followers with pagination support.

Usage Example

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

function UserFollowersList({ targetUserId }: { targetUserId: string }) {
  const fetchFollowersByUserId = useFetchFollowersByUserId();

  const loadUserFollowers = async () => {
    try {
      const result = await fetchFollowersByUserId({
        userId: targetUserId,
        page: 1,
        limit: 15
      });

      console.log(`${result.pagination.totalCount} users follow this person`);
      result.followers.forEach(follower => {
        console.log(`${follower.user.username} - Follow ID: ${follower.followId}`);
      });
    } catch (error) {
      console.error("Failed to fetch user followers:", error.message);
    }
  };

  return <button onClick={loadUserFollowers}>View Followers</button>;
}

Advanced Usage with State Management

import { useFetchFollowersByUserId, FollowersResponse } from "@replyke/react-js";
import { useState, useEffect } from "react";

function FollowersGrid({ userId }: { userId: string }) {
  const fetchFollowersByUserId = useFetchFollowersByUserId();
  const [followersData, setFollowersData] = useState<FollowersResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    const loadFollowers = async () => {
      if (!userId) return;

      setLoading(true);
      try {
        const result = await fetchFollowersByUserId({
          userId,
          page: currentPage,
          limit: 12
        });
        setFollowersData(result);
      } catch (error) {
        console.error("Failed to load followers:", error);
      } finally {
        setLoading(false);
      }
    };

    loadFollowers();
  }, [userId, currentPage, fetchFollowersByUserId]);

  return (
    <div>
      {loading ? (
        <div>Loading followers...</div>
      ) : (
        <>
          <h3>
            {followersData?.pagination.totalCount || 0} Followers
          </h3>

          <div className="followers-grid">
            {followersData?.followers.map(follower => (
              <div key={follower.followId}>
                <h4>{follower.user.username}</h4>
                <small>Followed: {new Date(follower.followedAt).toLocaleDateString()}</small>
              </div>
            ))}
          </div>

          {followersData && followersData.pagination.totalPages > 1 && (
            <div className="pagination">
              <button
                disabled={!followersData.pagination.hasPreviousPage}
                onClick={() => setCurrentPage(prev => prev - 1)}
              >
                Previous
              </button>

              <span>
                Page {followersData.pagination.currentPage} of {followersData.pagination.totalPages}
              </span>

              <button
                disabled={!followersData.pagination.hasNextPage}
                onClick={() => setCurrentPage(prev => prev + 1)}
              >
                Next
              </button>
            </div>
          )}
        </>
      )}
    </div>
  );
}

Parameters & Returns

Parameters

The hook returns a function that accepts an object with the following fields:

userId · string · required

page · number

1

limit · number

20

Returns

The function returns a Promise that resolves to a FollowersResponse object containing:

FollowersResponse

followers · FollowerWithFollowInfo[]

Array of follower information

pagination · PaginationInfo

Pagination metadata

FollowerWithFollowInfo

Field	Type	Description
followId	string	Unique ID of the follow relationship
user	User	User object containing follower information
followedAt	string	ISO date string of when the follow occurred

PaginationInfo

Field	Type	Description
currentPage	number	Current page number
totalPages	number	Total number of pages available
totalCount	number	Total number of followers
hasNextPage	boolean	Whether there are more pages after current page
hasPreviousPage	boolean	Whether there are pages before current page
limit	number	Number of items per page used in this request

Error Handling

The hook will throw errors in the following cases:

• No user ID is provided
• No project is specified

Notes

This is a public endpoint that doesn’t require user authentication, making it suitable for displaying any user’s followers in public-facing features.