Relay Pagination Master

•
72
•

Implements complex GraphQL Cursor Connections and advanced Relay pagination patterns for high-performance data loading.

This skill equips Claude with the expertise to architect and implement sophisticated pagination logic using the Relay framework and GraphQL Cursor Connections Specification. It provides a comprehensive suite of implementation patterns, from basic 'load more' buttons and infinite scrolling via Intersection Observer to complex bidirectional navigation and virtualized lists. It specifically addresses advanced requirements like maintaining scroll position, handling optimistic UI updates for connection edges, and managing paginated content across filtered views or tabbed interfaces, ensuring your application remains performant even with massive datasets.

Key Features

0172 GitHub stars
02Optimistic UI updates for seamless connection and edge management
03Bidirectional navigation patterns for complex data exploration
04Declarative cursor-based pagination using the usePaginationFragment hook
05Search and filter integration within paginated GraphQL connections
06Infinite scroll implementation with Intersection Observer integration

Use Cases

01Implementing complex e-commerce product grids with bidirectional navigation
02Building high-performance social media feeds or activity logs with infinite scroll
03Developing searchable and filterable administrative dashboards for large datasets