relay-pagination

Implement Relay cursor-based pagination with usePaginationFragment and load functions.

36|8|Updated Jan 25, 2024

Search Tags:#GraphQL #pagination #cursor #infinite-scroll #load-more #Relay #paginate

Ready to run

npx skills add https://github.com/beavermoney/beavermoney --skill relay-pagination-beavermoney

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: relay-pagination
Source: https://github.com/beavermoney/beavermoney/tree/main/.agents/skills/relay-pagination
Command: npx skills add https://github.com/beavermoney/beavermoney --skill relay-pagination-beavermoney

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill makes it easier to paginate large datasets in web apps by implementing cursor-based and infinite-scroll patterns using Relay's pagination APIs.

Core Features & Use Cases

Basic, infinite scroll, bidirectional, and filtered pagination using Relay.
Real-world use cases include feeds, admin dashboards, product listings, and any data-heavy lists requiring smooth, continuous loading.

Quick Start

Initialize a paginated list with a Relay fragment and use loadNext to fetch more data; reset with refetch when filters change.

Frequently Asked Questions about relay-pagination

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement cursor-based pagination with Relay for a feed?▼

Cursor-based pagination in Relay uses usePaginationFragment with @connection directives to manage incremental data loading. You call loadNext to fetch more items, creating smooth infinite scroll experiences for feeds and large data-heavy lists.

What's the best way to handle bidirectional paging in Relay?▼

Bidirectional paging in Relay uses loadNext and loadPrevious functions within usePaginationFragment to fetch data in both directions. This approach maintains stable cursor positions while incrementally loading items for admin dashboards or product listings.

How do I reset Relay pagination when applying new filters?▼

Reset Relay pagination by calling refetch when filters change. This re-initializes the cursor-based connection, clearing existing paginated data and fetching fresh results from the beginning of the filtered dataset.

Does Relay cursor pagination work for infinite scroll UI patterns?▼

Relay cursor pagination supports infinite scroll by using usePaginationFragment to track connection edges. The loadNext function fetches subsequent pages as users scroll, enabling continuous data loading for product listings and feeds.

When do I need cursor-based pagination instead of offset pagination?▼

Cursor-based pagination is needed for large datasets where stable, incremental loading matters. It handles infinite scroll, load more, and bidirectional paging efficiently, preventing duplicate or missing items during real-time data updates in feeds and dashboards.

Can I use Relay pagination for filtered admin dashboard listings?▼

Relay pagination supports filtered listings by combining usePaginationFragment with refetch to reset connections when filters change. This manages cursor-based incremental loading for admin dashboards displaying large, dynamically filtered datasets.