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.

About

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

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

Use Cases

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

About

Key Features

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

Use Cases

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