using useInfiniteQuery with a paginated graphql API to return all the pages

[joeynimu]

I am having trouble using useInfiniteQuery with a paginated graphql API.

My query expects a page variable that is used to get a specific page dataset. I am updating the page variable by clicking the load more button and calling the fetch next page function.

While this works to get the next set of data, react-query seems to be returning only one page instead of returning the previous page + its results. Hence, the results are from the initial page or last page results.
How do I get back results from all the pages? Or is It that I am not using the right convention of updating the page variable?

Below is a simplified gist,

export default () => {
  const [page, setPage] = useState(1);
  const perPage = 10;
  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
    ['data', page, perPage],
    () =>
      getPaginatedProductItems({
        per_page: perPage,
        page // <- note these variables passed specifically this one. It's used to get a specific page dataset
      }),
    {
      getNextPageParam(lastPage) {
        return lastPage.paginated_product_items_v2.page_info.has_next;
      },
      getPreviousPageParam(firstPage) {
        return firstPage.paginated_product_items_v2.page_info.has_previous;
      }
    }
  );

  return <div>
      {status !== 'loading' && data.pages && <div>
          {data.pages.map((group, pageIndex) => <Fragment key={pageIndex}>
              <ul key={pageIndex}>
                {group.paginated_product_items_v2.map(
                  ({ product_item_name, product_item_id }) => <li key={product_item_id}>{product_item_name}</li>
                )}
              </ul>
            </Fragment>)}
        </div>}
      {hasNextPage && <button onClick={() => {
            setPage(page + 1); // this is updated so that the API can get the next page of data
            fetchNextPage();
          }}>
          {' '}Fetch Next page{' '}
        </button>}
    </div>;
};

[dusty]

Try taking page out of the cache key, as it will be creating a new cache each time it loads.

['data', page, perPage]

[joeynimu]

@dusty Thanks for your response. This seems to sort it out, only that the second-page data seems to be a duplicated set of the first page. Subsequent pages (page 3 onwards) seem to work okay. What could be causing this?

[TkDodo]

I think it's a closure problem. When you call fetchNextPage, react-query calls the queryFn, which closures over page from the local state from the time it was created, so it doesn't know about the increment (setPage(page +1 )) that you have just done.

I don't think you need the local state for this. react-query injects the result from getNextPageParam into the queryFn as pageParam (have a look at the examples). So you will get whatever getNextPageParam produces:

- const [page, setPage] = useState(1);
const perPage = 10;
const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
    ['data', page, perPage],
-    () =>
+    ({ pageParam = 1 }) =>
      getPaginatedProductItems({
        per_page: perPage,
-        page // <- note these variables passed specifically this one. It's used to get a specific page dataset
+        page: pageParam 
      }),
    {
      getNextPageParam(lastPage) {
        return lastPage.paginated_product_items_v2.page_info.has_next;
      },
      getPreviousPageParam(firstPage) {
        return firstPage.paginated_product_items_v2.page_info.has_previous;
      }
    }
  );

for this to work, your getNextPageParam needs to return the number of the next page, not just a boolean if there is a next page. But you won't need the local state at all if you do this. You can also derive that info inside getNextPageParam, because you get all pages passed in, something like:

getNextPageParam(lastPage, allPages) {
  return lastPage.paginated_product_items_v2.page_info.has_next ? allPages.length + 1 : undefined;
},

alternatively, you can pass that information directly into fetchNextPage:

setPage(page + 1);
fetchNextPage({ pageParam: page +1 });

but I would prefer the first approach because it centralises the functionality on the hook call.

[joeynimu]

@TkDodo, thank you!

On top of your diff changes, my API returns some info regarding the current page, and therefore I updated my getNextPageParam function as follows, which works like a charm.

...
getNextPageParam(lastPage) {
        return lastPage.paginated_product_items_v2.page_info.has_next
          ? lastPage.paginated_product_items_v2.page_info.current_page + 1
          : undefined;
 },

Thanks once again, cheers!

[TkDodo]

that looks perfect 🚀 . Glad I could help