zid•12mo ago

multiple pagination queries in a single function

i imagine this to be uncommon scenario, but came across a situation where having the ability to setup 2 pagination queries inside a single function wouldve been great. my scenario is that i have 2 tables, threads and comments, where they each have a status property that can hold the following values hidden and visible. What id like to be able to do is fetch all the hidden threads and comments, and return a single list [...threads, ...comments]. Another way to handle this is to create a dedicated table hiddenPosts for example, but feels like more of a workaround. Currently, I'm using two separate pagination queries, then using a useEffect to concatenate/spread them into a single result using local state. Curious if this will ever be supported?

2 Replies

lee•12mo ago

We may eventually support this. I built a prototype but it was very complicated. The issue was that there are many ways to return pages from multiple tables (you could do a join by returning pages of comments for each page of threads, you could alternate pages from each table, or you could go through all pages of one table then the other). From my understanding, it should be possible to do your pattern with existing hooks, without useEffect. Does this work?

const {results: hiddenThreads, status, loadMore: loadMoreThreads } = usePaginatedQuery(api.hiddenThreads);
const {results: hiddenComments, loadMore: loadMoreComments} = usePaginatedQuery(api.hiddenComments, status === "Exhausted" ? {} : "skip");
const results = [...hiddenThreads, ...hiddenComments];
const loadMore = (num) => {
  loadMoreThreads(num);
  loadMoreComments(num);
};

const {results: hiddenThreads, status, loadMore: loadMoreThreads } = usePaginatedQuery(api.hiddenThreads);
const {results: hiddenComments, loadMore: loadMoreComments} = usePaginatedQuery(api.hiddenComments, status === "Exhausted" ? {} : "skip");
const results = [...hiddenThreads, ...hiddenComments];
const loadMore = (num) => {
  loadMoreThreads(num);
  loadMoreComments(num);
};

zidOP•12mo ago

Ah, not sure why i used useeffect there, thank you! For my requirements, the threads and comments do not have to be sequentially loaded but I do like the pattern using status === "Exhausted". Regarding the desire for a cleaner out of the box solution, at least in my case, the desires been lifted. I just didnt like the pattern w useeffect + additional local state, but seemed to have forgotten some of basics with React. lol Thank you!

multiple pagination queries in a single function

Did you find this page helpful?