loadMore with usePaginatedQuery
I'm stumbling into some issues with loadMore and the usePaginatedQuery hook. We call loadMore when pressing a button.
We log the click and loadMore is called, but we have to call it 3 times before getting the first few elements.
initialNumItems is 2, and we're calling loadMore(4). This doesn't seem to be transient since it requires 4 total calls to loadMore before it actually loads additional items.
2 Replies
If your query is filtering out results after the paginate call, it could be returning empty pages. I would drop
console.log lines at various places in the query to see how big the pages are.
If the pages are 0:
1. Your query might be scanning a ton of rows to find the next page and giving up (it will only scan so many rows to not bloat the transaction). If this is the problem, try pushing some of the filtering into an index. e.g. instead of .filter(q=>q.eq(q.field("userId"), userId)).paginate(... make an index on userId and paginate over .withIndex("userId", q=>q.eq("userId", userId)).paginate(...
2. You might be using something like the RLS library from convex-helpers, which is filtering out rows that your user doesn't have access to. This filtering happens outside of the pagination limit currently. If that's the case, limit your query via filters or withIndex to exclude the rows they don't have access to
Alternatively you might be clicking the button multiple times while waiting on a single page, if your connection is slow. When you click it once, the state of the paginated query should no longer be canLoadMore until the new results come in, at which point loadMore can be called again
Did you figure out what it was?We couldn't figure it out but was fixed