relay-pagination

Cursor-based pagination in Relay uses usePaginationFragment to manage edges with cursors and pageInfo metadata. Implement it by setting up @refetchable fragments, rendering edges with node data, and calling loadNext or loadPrevious hooks to fetch additional pages without re-querying the entire dataset.

Cursor-based pagination uses opaque cursors to track position within a dataset, making it more efficient and stable when data changes between requests. Relay's cursor approach handles first/after/last/before arguments and supports bidirectional navigation without the performance and consistency issues offset-based pagination introduces.

Yes, Relay pagination supports infinite scroll through usePaginationFragment and intersection-based loading triggers. Combine loadNext with an Intersection Observer to automatically fetch pages as users scroll, creating seamless loading without page boundaries.

Relay cursor connections support bidirectional pagination through loadNext and loadPrevious hooks, which manage forward and backward traversal. Use @connection directives to maintain cache consistency and pass first/after or last/before arguments to navigate both directions while preserving UI state.

Relay cursor pagination requires edges containing cursor and node, plus pageInfo with hasNextPage, hasPreviousPage, startCursor, and endCursor fields. These fields enable the usePaginationFragment hook to determine pagination state and construct queries with first/after/last/before arguments.

Relay supports both patterns. Use infinite scroll with Intersection Observer for seamless loading, or implement explicit load-more buttons by calling loadNext on user action. Choose based on UX preference and dataset size; both patterns use the same usePaginationFragment and @connection infrastructure.