Error when using ensureQueryData with infiniteQueryOptions

[chinanderm]

I'm having issues in v5 when trying to use ensureQueryData() with infiniteQueryOptions() and useSuspenseInfiniteQuery().

See this StackBlitz for a reproduction: https://stackblitz.com/edit/vitejs-vite-tnfvrc?file=src%2Froutes%2Findex.tsx

In a TanStack Router loader function I am using queryClient.ensureQueryData, passing in the result of a infiniteQueryOptions() call. The initial data fetch is successful but in the route component when calling useSuspenseInfiniteQuery() with the infiniteQueryOptions() result, an error is getting thrown: Cannot read properties of undefined (reading 'length'), which appears to be coming from getNextPageParam internal function. In this location, pages is undefined.

Am I composing things incorrectly? Are infiniteQueryOptions() and useSuspenseInfiniteQuery() incompatible with ensureQueryData()?

Also, despite setting initialPageParam, the pageParam value passed into the queryFn is undefined on the first invocation. Why is that?

[TkDodo]

ensureQueryData calls fetchQuery under the hood, but for infinite queries, it would need to call fetchInfiniteQuery.

Since it's just a thin wrapper over getQueryData ?? fetchQuery, you can implement it in user-land pretty quickly:

const data =
  queryClient.getQueryData(myInfiniteQueryOptions().queryKey) ??
  (await queryClient.fetchInfiniteQuery(myInfiniteQueryOptions()));

Also, despite setting initialPageParam, the pageParam value passed into the queryFn is undefined on the first invocation. Why is that?

can't confirm that, probably a side-effect of the above issue ?

forked, working stackblitz: https://stackblitz.com/edit/vitejs-vite-suancq

[mrlubos]

@TkDodo Would I be able to implement the "check for ID in a page" logic inside getNextPageParam and return undefined if it's found? I mean, I'm sure I could, but is it advisable?

[TkDodo]

sure

[mrlubos]

@TkDodo setting pages to a high number will do in my case, thanks! However, it's not perfect. Here's an example https://stackblitz.com/edit/vitejs-vite-w9jro4?file=src%2Froutes%2Findex.tsx

Note that I am asking for 10 pages, but if page is larger than 2, I return undefined. This would mean that there are no more pages, and we should abandon attempting to fetch more. However, you can see in the console that all request attempts were made. This is wasteful and requires a balance between setting a good limit and app performance. If I set it to Infinity as suggested, that does NOT work because infiniteQueryOptions() will simply keep running forever. Do you think this should be reported as a bug? I think I understand what it's trying to do, but not sure that's a correct behaviour

[TkDodo]

thanks for the reproduction; we do have a test that only the amount of pages winds up in the cache, but wer're not eagerly exiting the loop here:

query/packages/query-core/src/infiniteQueryBehavior.ts

Lines 103 to 107 in 7edf587

	// Fetch remaining pages
	for (let i = 1; i < remainingPages; i++) {
	const param = getNextPageParam(options, result)
	result = await fetchPage(result, param)
	}

I think this is a bug

[TkDodo]

here's the fix:

• fix(query-core): abort fetch loop for infinite queries if getNextPageParam returns null or undefined #7799

[TkDodo]

We’re now shipping a dedicated ensureInfiniteQueryData function for this:

https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientensureinfinitequerydata

[mrlubos]

Very cool!