Relay GraphQL Pagination

•
39
•

Implements efficient GraphQL cursor-based pagination and infinite scroll patterns using Relay's connection specifications.

This skill equips Claude with the expertise to implement the GraphQL Cursor Connections Specification within the Relay framework. It provides standardized patterns for usePaginationFragment, allowing for the creation of high-performance data fetching components featuring infinite scroll, 'load more' buttons, bidirectional navigation, and filtered search. By following best practices for refetchable queries and connection keys, the skill ensures seamless cache updates and robust state management for complex, large-scale datasets in React applications.

主要功能

01Optimistic UI updates for connections using @prependEdge and @appendEdge
02Support for bidirectional, filtered, and searchable pagination
03Declarative pagination using usePaginationFragment and @refetchable queries
0439 GitHub stars
05Standardized GraphQL Cursor Connections Specification implementation
06Infinite scroll patterns with Intersection Observer integration

使用场景

01Developing administrative dashboards with complex filtered paginated tables
02Building high-performance social media feeds with infinite scroll
03Implementing bidirectional navigation for real-time messaging or logging systems