passive-yellow

useInfiniteQuery - How to discard page if it returns no results?

Hi, I'm trying to use useInfiniteQuery in a bidirectional situation with both next/prev cursors https://tanstack.com/query/latest/docs/react/guides/infinite-queries#what-if-i-want-to-implement-a-bi-directional-infinite-list My data is real time and time based so the next page may or may not have results. Currently I'm polling for the next page every x seconds to check if there is any more data to display (via fetchNextPage()). but doing this results in an additional page and pageParams index added for every attempt. I'm looking for a way to discard the page if API page result is empty. as on refetch only need to happen for the pages requests with data. Any idea how to do this?

Infinite Queries | TanStack Query Docs

Rendering lists that can additively "load more" data onto an existing set of data or "infinite scroll" is also a very common UI pattern. TanStack Query supports a useful version of useQuery called useInfiniteQuery for querying these types of lists. When using useInfiniteQuery, you'll notice a few things are different:

7 Replies

flat-fuchsia•3y ago

return undefined from getNextPageParam if the lastPage is empty

passive-yellowOP•3y ago

Returning undefined from getNextPageParam on the last page means that when fetchNextPage() is triggered again it doesn't request more data. As it seems seems to treat the list as finite/ended. How would i get it to check again? I've had a little success by overriding structuralSharing and removing any page with no records.

 structuralSharing: (oldData, newData) => {
      console.log('structuralSharing', oldData, newData);
      return newData.pages.reduce(
        (acc, page, index) => {
          if (!newData.pageParams[index] || page.items.length > 0) {
            acc.pages.push(page);
            acc.pageParams.push(newData.pageParams[index]);
          }
          return acc;
        },
        { pages: [], pageParams: [] }
      );
    },

 structuralSharing: (oldData, newData) => {
      console.log('structuralSharing', oldData, newData);
      return newData.pages.reduce(
        (acc, page, index) => {
          if (!newData.pageParams[index] || page.items.length > 0) {
            acc.pages.push(page);
            acc.pageParams.push(newData.pageParams[index]);
          }
          return acc;
        },
        { pages: [], pageParams: [] }
      );
    },

I think I'm going to have to manually construct the nextPage and prevPage on all requests based on the last successful request with data. As it appears unless next/prev cursors are present then it wont allow you to carry on. I assume overriding structuralSharing will bypass any internal optimisations?

flat-fuchsia•3y ago

How would i get it to check again?

by refetching the whole infinite query

passive-yellowOP•3y ago

Basically looking for a way to append new data to both the start and end. I can calcuate the cursor based on the first and last record in each api response. Currently im trying to use fetchNextPage and fetchPrevPage to trigger the fetch as needed. So that I don't have to fetch any data that is already present. Is there a better way to do this?

flat-fuchsia•3y ago

it seems like you're using fetchNextPage to see if there is more data, but that's not what it's for. Again, I would: - stop fetching more data if the last page is empty. or maybe, your server can return hasMore: boolean with each page. To get this, it's common to fetch limit+1 from the database, but only deliver limit to the client. - if you then want to check if there are more pages, refetch() the query. It will load all pages, and if the last empty page now has results, you'll get them

passive-yellowOP•3y ago

Ok thanks I think this makes sense. In my use case the data (each item) returned is immutable, is there anyway to avoid having to fetch page data that has already been fetched? I guess the issue is the cursors move and therefore need to be recalculated.

flat-fuchsia•3y ago

exactly. for consistency, all pages need to be refetched

Gaming

Programming

useInfiniteQuery - How to discard page if it returns no results?

Did you find this page helpful?