Use Fetch Following By User Id

useFetchFollowingByUserId

Overview

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

Usage Example

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

function UserFollowingList({ targetUserId }: { targetUserId: string }) {
  const fetchFollowingByUserId = useFetchFollowingByUserId();

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

      console.log(`This user is following ${result.pagination.totalCount} people`);
      result.following.forEach(follow => {
        console.log(`Following ${follow.user.username} since ${follow.followedAt}`);
      });
    } catch (error) {
      console.error("Failed to fetch user's following:", error.message);
    }
  };

  return <button onClick={loadUserFollowing}>View Following</button>;
}

Advanced Usage with State Management

import { useFetchFollowingByUserId, FollowingResponse } from "@replyke/react-js";
import { useState, useEffect } from "react";

function FollowingExplorer({ userId, username }: { userId: string; username: string }) {
  const fetchFollowingByUserId = useFetchFollowingByUserId();
  const [followingData, setFollowingData] = useState<FollowingResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);

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

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

    loadFollowing();
  }, [userId, currentPage, fetchFollowingByUserId]);

  return (
    <div>
      <h2>{username} is following {followingData?.pagination.totalCount || 0} users</h2>

      {loading ? (
        <div>Loading...</div>
      ) : (
        <>
          <div className="following-grid">
            {followingData?.following.map(follow => (
              <div key={follow.followId} className="user-card">
                <h4>{follow.user.username}</h4>
                <small>Following since: {new Date(follow.followedAt).toLocaleDateString()}</small>
              </div>
            ))}
          </div>

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

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

              <button
                disabled={!followingData.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 FollowingResponse object containing:

FollowingResponse

following · FollowingWithFollowInfo[]

Array of following information

pagination · PaginationInfo

Pagination metadata

FollowingWithFollowInfo

Field	Type	Description
followId	string	Unique ID of the follow relationship
user	User	User object containing following 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 users this user is following
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 following list in public-facing features.