Pagination based on the cursor

[NurdinDev]

What is the best practice to do pagination based on the cursor?

Edited: infinite scroll pagination

[kitten]

This isn't a very precise question; 😅 however, if this is about how to actually paginate then you pass the cursor variable. If this is about infinite scroll pagination, then this pattern works well: https://twitter.com/benawad/status/1303503308271816711?s=21

If you use Graphcache then there's a dedicated helper that can do infinite scroll pagination automatically

[NurdinDev]

Sorry for asking an imprecise question 😅
Yes, I meant the infinite scroll, and the pattern you shared is very helpful, thank you @kitten

[kitten]

Awesome! Let me know if that doesn't work or anything else comes up ✌️
In general, personally I'd prefer the React Fragment based solution if it's possible as it's more flexible. That's because I see infinite scrolling as a UI feature and UI state. But that does mean you have to account for more logic. This may be simple (as demonstrated by the screenshot) but may expose you to more edge-cases, e.g. ensuring that all pages are loaded from the cache of it does have the pages.

The relayPagination helper in Graphcache makes this simpler if you are in fact using Graphcache and normalised caching. But on the other hand it will make cache invalidation and refreshes a larger issue.

Hope that helps ✌️