> ## 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 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

```tsx theme={null}
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

```tsx theme={null}
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:

<ParamField path="userId" type="string" required>
  *
</ParamField>

<ParamField path="page" type="number">
  1
</ParamField>

<ParamField path="limit" type="number">
  20
</ParamField>

### Returns

The function returns a Promise that resolves to a `FollowingResponse` object containing:

#### `FollowingResponse`

<ResponseField name="following" type="FollowingWithFollowInfo[]">
  Array of following information
</ResponseField>

<ResponseField name="pagination" type="PaginationInfo">
  Pagination metadata
</ResponseField>

#### `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.