Prefetching infinite queries

[bryanrsmith]

I wanted to prefetch the first page of an infinite query, but the docs don't seem to cover this. I was able to find a solution by reading the code, but it uses an undocumented option. I'm wondering if this option and its use for prefetching infinite queries should be documented, or if a different API might be more desirable.

Problem

useInfiniteQuery returns an array of results, and captures paging parameters with the getFetchMore options. If you pass a query key to queryCache.prefetchQuery that is later used by your infinite query, you'll get a cached result that hasn't gone through the getFetchMore/paging mapping.

Solution

Looking through the code, I found that useInfiniteQuery injects the infinite: true query option, causing the mapping to be applied by the base query. If you specify infinite: true along with your getFetchMore function in the query options passed to queryCache.prefetchQuery, the result will go through the appropriate mapping to work with your infinite query.

Example

I ended up factoring out a helper function to ensure my query arguments stay in sync between the fetch and prefetch call sites.

function getQueryArgs(filters) {
	return [
		['bikes', filters], // queryKey
		fetchBikes, // queryFn
		{
			infinite: true, // implied by useInfiniteQuery, but needed for prefetching to work (undocumented)
			getFetchMore: lastGroup => lastGroup.results.endCursor,
		},
	];
}

// use the infinite query as usual
const { data, status } = useInfiniteQuery(...getQueryArgs(filters));

// when you want to prefetch
queryCache.prefetchQuery(...getQueryArgs(nextFilters));

https://react-query.tanstack.com/docs/api#useinfinitequery
https://react-query.tanstack.com/docs/api#querycacheprefetchquery

P.S., Thanks so much for this fantastic library!

[kuldarim]

Hi @bryanrsmith ,
I think I'm using a newer version now, but in case someone will end up in the same discussion queryClient now has prefetchinfinitequery method. Which solves this problem.

await queryClient.prefetchInfiniteQuery(queryKey, queryFn);

[velopert]

Very helpful.

[fanelfaa]

is this support for SSR?

[TkDodo]

yes

[HypeNeutron]

@bryanrsmith @TkDodo

Hi @bryanrsmith , I think I'm using a newer version now, but in case someone will end up in the same discussion queryClient now has prefetchinfinitequery method. Which solves this problem.

await queryClient.prefetchInfiniteQuery(queryKey, queryFn);

with React query v.4
in code Expected 1 arguments as pageParam how to prefetch function belike?

  useEffect(() => {
    queryClient.prefetchInfiniteQuery(['photos', query, paramQuery], 
    () => fetchPhotos() //This expect one argument ? that is "pageParam" from context function
    );
  }, [fetchPhotos, paramQuery, query, queryClient]);