useInfiniteQuery, prefetching next page

[emonakov]

I wanted to prefetch each next page after the first page is rendered with the useInfiniteQuery.

Problem

I found there's a method of queryClient.prefetchInfiniteQuery.
I tried to use it inside a component just once, after receiving the first batch of data but it ended up rewriting the query data completely, so instead of prefetched data in the array of pages of the query data I have only one page with this next page data in it. I am clearly doing something wrong here and need to figure out how to make it right and expected.

Here's my query

const {
    data: queryData,
    isFetchingNextPage,
    isLoading,
    fetchNextPage,
    hasNextPage,
  } = useInfiniteQuery<UsersQueryResult>(
    'users',
    async ({ pageParam = 1 }) => {
      const res = await axios.get(`https://randomuser.me/api/?results=50&page=${pageParam}&seed=randomuser&nat=GB`),
      );

      return res.data;
    },
    {
      getNextPageParam: (firstPageData) => {
        const page =
          firstPageData.info.page < PAGES
            ? firstPageData.info.page + 1
            : undefined;

        return page;
      },
    },
  );

my single prefetch call is this that rewrites results from the first query

queryClient.prefetchInfiniteQuery('users', async ({ pageParam = 2 }) => {
  const res = await axios.get(
    buildUrl(String(process.env.REACT_APP_USERS_API), {
      results: PER_PAGE,
      page: pageParam,
      seed: process.env.REACT_APP_USERS_SEEDNAME,
      nat,
    }),
  );

  return res.data;
});

[cha2hyun]

+1

[TkDodo]

There is no prefetching of a next page inside an infiniteQuery - there is only fetching it, because there is only one cache entry that consists of multiple pages.

So when you are rendering a react component that uses an infinite query, and you fetch the first page and show it, you can then surely fetch the next page as well with fetchNextPage, and it will instantly be shown because your one cache entry then has two pages to render. Of course you can also decide to just not render it I guess, with some extra state.

The usual way is just to fetch the next page when the user comes close to scrolling to the bottom of the infinite timeline.