GET /api/v1/consumers?first=20&after=eyJpZCI6ImNvbnNfMDFIWFlaIn0= HTTP/1.1
Host: admin.fanfare.io
Authorization: Bearer sk_live_xxxxxxxxxxxx

{
  "data": [
    {
      "id": "cons_01HXYZ123456789",
      "email": "[email protected]",
      "createdAt": "2024-11-01T10:00:00Z"
    },
    {
      "id": "cons_01HXYZ123456790",
      "email": "[email protected]",
      "createdAt": "2024-11-01T10:01:00Z"
    }
  ],
  "pageInfo": {
    "startCursor": "eyJpZCI6ImNvbnNfMDFIWFlaIn0=",
    "endCursor": "eyJpZCI6ImNvbnNfMDFIWFlaMn0="
  }
}

GET /api/v1/consumers?first=20 HTTP/1.1

GET /api/v1/consumers?first=20&after=eyJpZCI6ImNvbnNfMDFIWFlaMn0= HTTP/1.1

GET /api/v1/consumers?last=20&before=eyJpZCI6ImNvbnNfMDFIWFlaIn0= HTTP/1.1

GET /api/v1/consumers?first=20&search=john HTTP/1.1

GET /api/v1/consumers?first=20&sortBy=createdAt&sortDir=desc HTTP/1.1

interface PageInfo {
  startCursor: string | null;
  endCursor: string | null;
}

interface PaginatedResponse<T> {
  data: T[];
  pageInfo: PageInfo;
}

async function fetchAllPages<T>(endpoint: string, options: RequestInit): Promise<T[]> {
  const allItems: T[] = [];
  let cursor: string | null = null;

  do {
    const url = cursor ? `${endpoint}?first=100&after=${cursor}` : `${endpoint}?first=100`;

    const response = await fetch(url, options);
    const result: PaginatedResponse<T> = await response.json();

    allItems.push(...result.data);
    cursor = result.pageInfo.endCursor;
  } while (cursor);

  return allItems;
}

import { useState, useCallback } from "react";

interface UsePaginationOptions {
  pageSize?: number;
}

function usePagination<T>(endpoint: string, options: UsePaginationOptions = {}) {
  const { pageSize = 20 } = options;
  const [data, setData] = useState<T[]>([]);
  const [pageInfo, setPageInfo] = useState<PageInfo | null>(null);
  const [loading, setLoading] = useState(false);

  const fetchPage = useCallback(
    async (cursor?: string, direction: "forward" | "backward" = "forward") => {
      setLoading(true);
      try {
        const params = new URLSearchParams();

        if (direction === "forward") {
          params.set("first", String(pageSize));
          if (cursor) params.set("after", cursor);
        } else {
          params.set("last", String(pageSize));
          if (cursor) params.set("before", cursor);
        }

        const response = await fetch(`${endpoint}?${params}`);
        const result: PaginatedResponse<T> = await response.json();

        setData(result.data);
        setPageInfo(result.pageInfo);
      } finally {
        setLoading(false);
      }
    },
    [endpoint, pageSize]
  );

  const nextPage = useCallback(() => {
    if (pageInfo?.endCursor) {
      fetchPage(pageInfo.endCursor, "forward");
    }
  }, [pageInfo, fetchPage]);

  const prevPage = useCallback(() => {
    if (pageInfo?.startCursor) {
      fetchPage(pageInfo.startCursor, "backward");
    }
  }, [pageInfo, fetchPage]);

  return {
    data,
    pageInfo,
    loading,
    fetchPage,
    nextPage,
    prevPage,
    hasNextPage: !!pageInfo?.endCursor,
    hasPrevPage: !!pageInfo?.startCursor,
  };
}

function useInfiniteScroll<T>(endpoint: string) {
  const [items, setItems] = useState<T[]>([]);
  const [cursor, setCursor] = useState<string | null>(null);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);

  const loadMore = useCallback(async () => {
    if (loading || !hasMore) return;

    setLoading(true);
    try {
      const params = new URLSearchParams({ first: "20" });
      if (cursor) params.set("after", cursor);

      const response = await fetch(`${endpoint}?${params}`);
      const result: PaginatedResponse<T> = await response.json();

      setItems((prev) => [...prev, ...result.data]);
      setCursor(result.pageInfo.endCursor);
      setHasMore(!!result.pageInfo.endCursor);
    } finally {
      setLoading(false);
    }
  }, [endpoint, cursor, hasMore, loading]);

  return { items, loadMore, hasMore, loading };
}

const result = await fetchPage();
if (result.data.length === 0) {
  // Handle empty state
}

const currentCursor = pageInfo?.startCursor;
await fetchPage(); // Refresh from beginning
// Optionally navigate back to previous position

// When filters change, reset pagination
useEffect(() => {
  setCursor(null);
  fetchPage();
}, [filters]);

{
  "id": "cons_01HXYZ123456789",
  "sortValue": "2024-11-01T10:00:00Z"
}