What is cursor-based pagination in Relay?

Cursor-based pagination uses a unique pointer (cursor) to identify items in a dataset rather than an offset. This provides better performance and stability for large or frequently changing data.

How does Relay handle cache updates for paginated lists?

Relay uses the @connection directive to identify lists in the cache. This skill shows how to use connection IDs and mutations to optimistically add or remove items from those lists.

Does this skill support infinite scroll?

Yes, it provides patterns for implementing infinite scroll using the Intersection Observer API combined with Relay's loadNext and hasNext functionality.

Can I implement both forward and backward pagination?

Absolutely. The skill includes bidirectional patterns using startCursor and endCursor to support 'Load Previous' and 'Load Next' navigation simultaneously.

Relay GraphQL Pagination

Name: Relay GraphQL Pagination
Author: TheBushidoCollective

byTheBushidoCollective

•

API Development

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.

Key Features

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

Use Cases

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

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han relay-pagination

For use in Claude.ai and ChatGPT

Download Skill