We’re working on a replacement for useConnection with better defaults and support for bi-directional pagination. The existing useConnection hook was added as a replacement for a bit over a year ago and is a drop-in replacement for the older pattern on the frontend (without having to change anything in the backend). It does this very well: It’s currently simple to move from to the new hook implementation.

As part of the strategic scale-testing, I’m currently working with Naman and Kelli take this one step further: We’re rethinking how we’re doing pagination across the stack. This means that we now recommend a fully cursor-based implementation in the backend that supports traversal in both directions and we’re also changing the UI default from being an append-only list to showing individual pages. This will need new front-end components: a hook similar to useConnection and a new pagination UI component and new back-end components.

Plan

This issue tracks the high-level completion of this effort and is broken down into the following tasks:

• Add a new backend abstraction that adds bi-directional pagination support for simple routes (without supporting custom orderings, @thenamankumar ) #45247
• Rename the existing useConnection hook to make it clear what it is still being used for. (Rename useConnection to useShowMorePagination #44703)
• Add a new hook to consume the backend API and allows for easy traversal of the data. (Add usePageSwitcherPagination hook #44664)
• Implement the new UI component as a first-class Wildcard component. (Add PageSwitcher wildcard component #44737)
• Add explanation and examples to the docs (Add section about pagination to GraphQL guide #45612)
• Migrate a few routes to the new pattern to learn about shortcomings and refine the API
• Extend backend support for custom cursors (other than ID) and custom ORDER BY columns (perhaps by using composite types?)

Read more

Learn more on why cursor-based navigation is the new preferred way or why we following the Relay spec for cursor based navigation:

• https://use-the-index-luke.com/no-offset
• https://relay.dev/docs/guided-tour/list-data/advanced-pagination/
• https://shopify.dev/api/usage/pagination-graphql
• https://relay.dev/graphql/connections.htm

/cc @felixfbecker