Does this skill support infinite scrolling?

Yes, it includes patterns for implementing infinite scroll using the Intersection Observer API integrated with Relay's pagination fragments.

Does it handle optimistic updates for new items?

Yes, it provides patterns for using @prependEdge and @appendEdge directives to ensure newly created items appear instantly in your paginated lists.

Can I use it for bidirectional pagination?

Absolutely. The skill covers implementation details for both forward and backward pagination using the standard GraphQL Connection specification.

What is the Relay Pagination skill for Claude Code?

It is a specialized capability that enables Claude to write and refactor advanced GraphQL cursor-based pagination logic using the Relay framework's best practices.

Relay Pagination Master

Name: Relay Pagination Master
Author: TheBushidoCollective

byTheBushidoCollective

•

API Development

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

About

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

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

Use Cases

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

About

Key Features

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

Use Cases

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