Paginación con SWR

"use client";
 
import useSWRInfinite from "swr/infinite";
 
const fetcher = (url: string) => fetch(url).then((r) => r.json());
 
const getKey = (pageIndex: number, previousPageData: any[] | null) => {
  if (previousPageData && previousPageData.length === 0) return null; // se alcanzó el final
  return `/api/posts?page=${pageIndex}&limit=10`;
};
 
function PostFeed() {
  const { data, size, setSize, isLoading, isValidating } = useSWRInfinite(getKey, fetcher);
 
  const posts = data ? data.flat() : [];
  const isLoadingMore = isLoading || (size > 0 && data && typeof data[size - 1] === "undefined");
  const isEmpty = data?.[0]?.length === 0;
  const isReachingEnd = isEmpty || (data && data[data.length - 1]?.length < 10);
 
  return (
    <div>
      {posts.map((post) => (
        <article key={post.id}>{post.title}</article>
      ))}
      <button
        disabled={isLoadingMore || isReachingEnd}
        onClick={() => setSize(size + 1)}
      >
        {isLoadingMore ? "Cargando..." : isReachingEnd ? "No hay más publicaciones" : "Cargar más"}
      </button>
    </div>
  );
}

"use client";
 
import useSWRInfinite from "swr/infinite";
 
interface Product {
  id: string;
  name: string;
  price: number;
}
 
interface PageResponse {
  items: Product[];
  nextCursor: string | null;
}
 
const fetcher = (url: string): Promise<PageResponse> =>
  fetch(url).then((r) => r.json());
 
export default function ProductCatalog() {
  const { data, size, setSize, isLoading } = useSWRInfinite<PageResponse>(
    (pageIndex, previousPageData) => {
      // Primera página — no se necesita cursor
      if (pageIndex === 0) return "/api/products?limit=20";
 
      // No hay más páginas
      if (!previousPageData?.nextCursor) return null;
 
      // Paginación basada en cursor
      return `/api/products?cursor=${previousPageData.nextCursor}&limit=20`;
    },
    fetcher
  );
 
  const products = data?.flatMap((page) => page.items) ?? [];
  const hasMore = data?.[data.length - 1]?.nextCursor !== null;
 
  if (isLoading) return <div>Cargando productos...</div>;
 
  return (
    <div>
      <div className="grid grid-cols-3 gap-4">
        {products.map((product) => (
          <div key={product.id} className="border p-4 rounded">
            <h3>{product.name}</h3>
            <p>${product.price}</p>
          </div>
        ))}
      </div>
      {hasMore && (
        <button onClick={() => setSize(size + 1)}>Cargar más</button>
      )}
    </div>
  );
}

const getKey = (pageIndex: number) => `/api/items?offset=${pageIndex * 20}&limit=20`;

import { useRef, useCallback } from "react";
 
function InfiniteList() {
  const { data, size, setSize } = useSWRInfinite(getKey, fetcher);
  const observer = useRef<IntersectionObserver>();
 
  const lastElementRef = useCallback(
    (node: HTMLElement | null) => {
      if (observer.current) observer.current.disconnect();
      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
          setSize((s) => s + 1);
        }
      });
      if (node) observer.current.observe(node);
    },
    [setSize]
  );
 
  const items = data?.flat() ?? [];
 
  return (
    <ul>
      {items.map((item, i) => (
        <li key={item.id} ref={i === items.length - 1 ? lastElementRef : undefined}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

const { data } = useSWRInfinite(getKey, fetcher, {
  parallel: true, // Obtener todas las páginas en paralelo durante la revalidación
});

const { data } = useSWRInfinite<Product[]>(getKey, fetcher);
// data: Product[][] | undefined
const allProducts = data?.flat() ?? [];
// allProducts: Product[]