Pagination for multiple items
Let's say I have 100 000 rows of data in my database and I have a REST API to query these. Obviously I can't query the 100 000 rows at once so ideally I want to have around 25 rows in my UI present and 25 on the next page and so on. Question is, how to do this in an efficient way? How to request the right amount from the server and so on
Thanks
56 Replies
Check out serverside pagination
You can either do it using cursors or offsets
using react query you have
useInfiniteQuery. trpc has some examples of this (the pattern is the same even if you're on REST):
"normal": https://nextjs.trpc.io (src https://github.com/trpc/examples-next-prisma-starter)
with RSC: https://rsc.trpc.ioInteresting, are the infinite posts saved where?
you mean db? yea postgres + prisma https://github.com/trpc/next-13/blob/a5762c93c297193253de6f34a8c06e61ac06ff82/server/routers/post.ts#L43-L57
No I meant on the client
when you load more the new ones gets put into the querycache
So RQ handles caching
yea
Okay maybe this is enough for me to go on
The term I mentioned is what that query is doing 🥺
So by serverside pagination the endpoint would be something like /myendpoint&pages=1
Or like /mynedpoint&entries=25
Or..?
yea exactly.
?page=5&page_size=20 i think are more common params or skip/take, first/after etcthe question mark probably is the divider here?
so if I do const { page, page_size } = params; it knows to split from the question mark?
and julius, https://rsc.trpc.io/, this page queries like this: ?page=5&page_size=20, or along the lines
I'm assuming when you scroll to the bottom, the params go up one
and it fetches more
yea, query param parsing can prob be a bit different in different frameworks though
I'm using node here
an express app