Realtime pagination in GraphQL

We review the canonical way of doing pagination in GraphQL and explore a solution to make it work realtime with subscriptions.

Transcript

1. slite.com RealTime pagination in GraphQL
2. // TODO 1. offset&limit is not ok 2. cursor based pagination 3. the case of realtime
4. Uses cases • large number of sorted items • frequent additions to the list • no full refresh from navigation
5. The good old offset+limit /api/users?limit=10&offset=0 or /api/users?page=3
6. 5 new items
7. Cursor.based.navigation Instead of offsets and index, use cursors relative to the items. Basically: /api/users?after={lastUserOfTheList.id}&first=10
8. Cursor.based.navigation.PROPER • give the clients the nextPageCursor • hide the cursor's meaning • give all the information a client might need: • total count • hasNext
9. Cursor.based.navigation.PROPER.FIXED
10. Cursor.based.navigation.PROPER.FIXED.v2
11. // how to build cursors endCursor = base64encode(item.createdAt) // how to use decode and use the after param afterCreatedAt = base64decode(params.after) psql.get(‘items’, where: { createdAt: { greaterThen: afterCreatedAt, }, limit: params.first, })
12. Let’s get real(time)
13. The real deal: how to update already fetched lists All we have are event base subscriptions subscription { newsFeedItemAdded: NewsFeedItem } Non-options: • Refetch the whole list • Duplicate ordering / filtering in the client
14. Our imperfect but working solution: expose the pagination context on subscriptions
16. Known limits and work-arounds What if you get out-of-sync? We refetch all the things What if there are params to your the lists? We could add mirroring params to the subscription
17. Thank you Request an early access slite.com