Paginated queries limiting amount rendered at once
Paginated queries: My API returns 25 items at once, but I only want to render 10 at once.
Ideally if you move to page 3 (indexes 20-30) when only 25 items are cached, the 5 cached would render and the other 5 would be loading until the data is fetched.
12 Replies
equal-aqua•3y ago
This can be solved
robust-apricot•3y ago
Useful reply
harsh-harlequin•3y ago
rendering and fetching are two different things that can be decoupled. From the looks of it, you're still looking at a rather "normal" infinite query where each page has 25 items.
You can decide to only render 10 of those, and then render some more as the user scrolls to the bottom of the page. When the 25th entry is hit, you would go and fetch 25 more, but only render 5 additional ones etc ...
like-goldOP•3y ago
i mean specifically a paged interface, not an infinite scroll
where you move forward and backward through pages of n size
harsh-harlequin•3y ago
Hm, that's a bit trickier
like-goldOP•3y ago
i was thinking just getting allRows from an infinite query and .slice'ing that?
figuring out when to fetch might be tricky though
this is for a gmail-like interface so rows might be removed at any time
bumping this in case anyone has an idea
like-gold•3y ago
I would try to handle this inside the query function. In your example, when page 3 is requested, the query function would get the first 50 items from the api (if 2 calls are needed, use
Promise.all to run them in parallel) and then slice the items before returning them.like-goldOP•3y ago
Promise.all isn't possible because the requests rely on the cursor from the previous to ensure consistency
like-gold•3y ago
Got it! That approach can still work, just running the 2 calls one after the other instead of in parallel!
like-goldOP•3y ago
i'm worried about ux when doing that - it's weird that data isn't being rendered as soon as possible
like-gold•3y ago
The ideal would probably be to simply render the same page size as the backend (25 items per page), what's preventing from doing that? Or updating the backend to return 10 items per pages?
like-goldOP•3y ago
it's not my backend API - if you mean 'redesign your UI to support the backend decision' that isn't an option
it's a 3-by-2 paginated grid, that's how i want it to look and whatever data fetching mechanism shoudl have no bearing on that