`useNextPrevPaginatedQuery`
Hey all—I published to
npm a little React hook for performing a more traditional form of pagination than what Convex offers by default via usePaginatedQuery. This hook, called useNextPrevPaginatedQuery, only loads one page of results at a time, and exposes functions for loading next/prev pages in the paginated result set. Check it out on GitHub or npm.GitHub
GitHub - rjdellecese/convex-use-next-prev-paginated-query: Simple n...
Simple next/prev paginated query hook for Convex. Contribute to rjdellecese/convex-use-next-prev-paginated-query development by creating an account on GitHub.
npm
convex-use-next-prev-paginated-query
Simple next/prev paginated query hook for Convex. Latest version: 1.0.0, last published: 21 hours ago. Start using convex-use-next-prev-paginated-query in your project by running
npm i convex-use-next-prev-paginated-query. There are no other projects in the npm registry using convex-use-next-prev-paginated-query.15 Replies
what is split pages?
I don't think there's actually too much in the Convex docs about this, and I've no clue how often this comes up (or what the exact conditions for its appearance are), but you can find some info here: https://docs.convex.dev/api/interfaces/server.PaginationResult#pagestatus
When a query reads too much data, it may return 'SplitRecommended' to indicate that the page should be split into two with splitCursor. When a query reads so much data that page might be incomplete, its status becomes 'SplitRequired'.
Nice i want to look into this more and will give it a try, honestly i'm a bit overwhelmed on the whole pagination and convex thing. I have been avoiding doing a deep dive to try to figure out what all the different options are now.
I think part of it is the new support for tanstack-table/query. I probably have 3 table designs right now. With various hooks being used that all need a full review as its been a couple months.
Then i recall this conversation a month or two ago where Lee was considering doing a example merging results of two tables into one pagination. Which as far as we knew there was no example of. But something i do need eventually.
Maybe someone is up for a stack article the year end state of pagination? Seems like a lot has changed in the last 9 months. :convex:
Getting an error here but it might be related to my setup. It seems like my ConvexProvider is set up correctly since useQuery, usePaginatedQuery and useQueries all work but when I switch them to useNextPrevPaginatedQuery I get this error : I have tried deleting my .next directory and made sure convex is up to date. I am using convex with clerk as well. The AI suggests the issue is my provider but its working well with everything else. Any idea what could be going on here? I can share my provider and layout.
Hmm, I'm able to reproduce this so it's not just you. I'll have a look!
This should be fixed in
1.0.2, sorry about that!@RJ i followed the same example in github but im facing in issue where when i call the hook on my api query
the result only returns the _tag and nothing else
basically i cant see any page property
using react 19 latest nextjs
Can you share some code?
its the same example from github
Oops, looks like that example uses the wrong property name for the results. This is the problem with README code that's not verified programmatically! The results of the query are actually in a
results property when the _tag is "Loaded". I'll fix the example in the README.
Are you using TypeScript? If so, it should have caught that for you, and told you what additional properties are available for each _tag variant.yes i have typescript but the problem was when i checked what results had it only had _tag and inside tag its just strings
Result will have different additional properties depending on the value of _tag, as you can see here: https://github.com/rjdellecese/convex-use-next-prev-paginated-query/blob/bf9f99c6be252cc37f3802c40f499e05bcd84ece/index.ts#L85
So if _tag is anything other than "Loaded", it shouldn't have any additional properties
If you see a _tag of "Loaded" and no additional properties, then that's a problem
I actually think page is a better name here than results, and it is also what the default Convex hook uses, so I've deprecated results in its favor, and added it in the latest release. For now you can use either, but in the next major release I'll remove results.It works! Thank you and happy new year
@RJ ok it works now but i was wondering if its possible to use page url params?
like ?page=1
to bring in the needed paginated query
Convex offers cursor-based pagination out-of-the-box, and what you're asking for (the ability to specify a page number and load the results for that particular "page") is, as far as I know, only supported by an offset-based pagination strategy. You can still do this with Convex, using e.g. the aggregate component, but it will be more work than this approach, and
useNextPrevPaginatedQuery will not integrate with it.i see thank you very much ill look into it in the future