Bi-directional Paginated Queries
The
usePaginatedQuery hook currently functions by first loading an initial page of results starting at the top of the list. More pages can then be loaded using the .loadMore(n) function. This pagination is always one-directional (ie. you always start with the first page and load future pages)
In some cases you may want to load a paginated list starting from a specific item in the list instead of the start of the list. This is useful for jumping to a particular item in a long paginated list.
In React Query useInfiniteQuery
React Query allows the user to pass in an initialCursor which can define the start point for loading the page. From there the user can call fetchPreviousPage() to fetch earlier items in the list (ie before the start cursor) and fetchNextPage() to fetch later items in the list.
Requested Functionality: A hook similar to useInfiniteQuery that functions like convex/react's usePaginatedQuery but includes the ability to specify an initalCursor and a method to fetch eariler entries (.loadPrev(n))
I'm still evaluating the docs here to see if this functionality could fit into the existing pagination model used by convex, but I figured I'd post this here to see if anyone has solved this problem previously or if any alternate solutions might exist for jumping to a specific item in a paginated query.Fully Reactive Pagination
Paginating over large datasets is tricky when the data is changing. Naive approaches result in missing or duplicated data. The trick is to rewrite lim...
2 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
I think you have two options:
- The
useNextPrevPaginatedQuery hook (I wrote this): https://github.com/rjdellecese/convex-use-next-prev-paginated-query
- Offset-based pagination via the aggregate component: https://www.convex.dev/components/aggregate#offset-based-paginationGitHub
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.