T
TanStack•3y ago
equal-aqua

New use case pagination

I have a use case that I think falls under pagination but I'm not sure how to achieve it without adding a couple useEffects. I have an API that I'd like to call that limits results. I want to go ahead and just iterate through and grab ALL records, I don't want to wait for user input to go get the next page. Right now I'm setting up as an infiniteQuery and then using a useEffect to manually trigger fetchNextPage() like this. 
   useEffect(() => {
      if (hasNextPage && !isFetchingNextPage) {
         fetchNextPage();
      }
   }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
   useEffect(() => {
      if (hasNextPage && !isFetchingNextPage) {
         fetchNextPage();
      }
   }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
Is there a better way to do this with just a query?
3 Replies
absent-sapphire
absent-sapphire•3y ago
I would just use useQuery and loop inside the query function before return all the results together.
equal-aqua
equal-aquaOP•3y ago
@julien I considered that but then we lose the functionality of reactquery being able to respond and adjust it's state to rejected promises along the way in the chain. I suppose I could maybe throw my own Promise.reject() if there's an error in the loop but that feels like bad practice if there is already a pattern for this built in. Which is what I'm hopeful for 😳
absent-sapphire
absent-sapphire•3y ago
If you throw your own Promise.reject() if there's an error in the loop, you'll still get the benefits of react query: - The query status will still be error, and onError will be called - It will be retried

Did you find this page helpful?