Cursor-Paginated REST Endpoint With a React Load More Button

const express = require('express');
const db = require('./db');
const { encodeCursor, decodeCursor } = require('./cursor');

const router = express.Router();
const MAX_LIMIT = 50;

router.get('/feed', async (req, res, next) => {
  try {
    const limit = Math.min(parseInt(req.query.limit, 10) || 20, MAX_LIMIT);
    const cursor = decodeCursor(req.query.cursor);

    const params = [];
    let where = '';
    if (cursor) {
      // row-value comparison keeps the composite key atomic
      where = 'WHERE (created_at, id) < ($1, $2)';
      params.push(cursor.createdAt, cursor.id);
    }

    params.push(limit + 1);
    const rows = await db.query(
      `SELECT id, title, created_at FROM posts
       ${where}
       ORDER BY created_at DESC, id DESC
       LIMIT $${params.length}`,
      params
    );

    const hasMore = rows.length > limit;
    const items = hasMore ? rows.slice(0, limit) : rows;
    const nextCursor = hasMore ? encodeCursor(items[items.length - 1]) : null;

    res.json({ items, nextCursor });
  } catch (err) {
    next(err);
  }
});

module.exports = router;

import { useCallback, useRef, useState } from 'react';

export function useCursorPagination(endpoint, { limit = 20 } = {}) {
  const [items, setItems] = useState([]);
  const [cursor, setCursor] = useState(null);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const inFlight = useRef(null);

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

    inFlight.current?.abort();
    const controller = new AbortController();
    inFlight.current = controller;

    try {
      const url = new URL(endpoint, window.location.origin);
      url.searchParams.set('limit', String(limit));
      if (cursor) url.searchParams.set('cursor', cursor);

      const res = await fetch(url, { signal: controller.signal });
      if (!res.ok) throw new Error(`Request failed: ${res.status}`);
      const data = await res.json();

      setItems((prev) => [...prev, ...data.items]);
      setCursor(data.nextCursor);
      setHasMore(Boolean(data.nextCursor));
    } catch (err) {
      if (err.name !== 'AbortError') setError(err);
    } finally {
      setLoading(false);
    }
  }, [endpoint, limit, cursor, hasMore, loading]);

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

import { useEffect } from 'react';
import { useCursorPagination } from './useCursorPagination';

export default function Feed() {
  const { items, hasMore, loading, error, loadMore } = useCursorPagination(
    '/api/feed',
    { limit: 20 }
  );

  useEffect(() => {
    loadMore();
  }, []); // fetch the first page on mount

  return (
    <section className="feed">
      <ul>
        {items.map((post) => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <time>{new Date(post.created_at).toLocaleString()}</time>
          </li>
        ))}
      </ul>

      {error && <p className="feed__error">Failed to load: {error.message}</p>}

      {hasMore ? (
        <button className="feed__more" onClick={loadMore} disabled={loading}>
          {loading ? 'Loading\u2026' : 'Load more'}
        </button>
      ) : (
        <p className="feed__end">You\u2019re all caught up.</p>
      )}
    </section>
  );
}