pages are undefined on useSuspenseInfiniteQuery in v5

[Venefilyn]

Hi all

While migrating from React Router to TanStack Router in packit/dashboard#435 I also decided to refactor our usage of TanStack Query (and upgrade it from v4 to v5)

Problem is that I can't figure out why. Here is the stacktrace

Uncaught TypeError: pages is undefined
    getNextPageParam infiniteQueryBehavior.ts:135
    hasNextPage infiniteQueryBehavior.ts:164
    createResult infiniteQueryObserver.ts:164
    updateResult queryObserver.ts:595
    setOptions queryObserver.ts:193
    setOptions infiniteQueryObserver.ts:84
    _a9 queryObserver.ts:86
    InfiniteQueryObserver infiniteQueryObserver.ts:64
    <anonymous> useBaseQuery.ts:68
    React 3
    useBaseQuery useBaseQuery.ts:66
    useSuspenseInfiniteQuery useSuspenseInfiniteQuery.ts:35
    ProjectsList ProjectsList.tsx:54 <-- my component

And the only thing that stands out is that on first fetch the data for the infinite query shows as a normal query in the data explorer

And then after clicking refetch it shows with the expected pages and pageParams

Also noticed an issue with queryClient not being found in the loader despite explicitly adding it like the TanStack Router documentation suggested

Links of note in the PR

• Initial usage of useSuspenseInfiniteQuery https://github.com/packit/dashboard/pull/435/files#diff-473b15d8671a48022bbef2a0461137b666569046196ba3519efa06780c53ea8bR53-R55
• TanStack Query config of the endpoint https://github.com/packit/dashboard/pull/435/files#diff-fb910c96707ddaf4f61412450cfae1b7cdd5bc64cbc4302d406b2d88c767c9c8
• Fetch query for the endpoint https://github.com/packit/dashboard/pull/435/files#diff-743a1375ffbcfc7db6681ebb286e236d6695fdb6ceade176e709478ea309df47

[Venefilyn]

The queryClient does not exist on type is fixed, rest is still there

[Venefilyn]

https://stackblitz.com/edit/tanstack-router-y2tk7l?file=src%2Fposts.tsx

[TkDodo]

this error always always always means that you have a wrong structure in the cache, because you mix "query" and "infinite query" data. ensureQueryData is for "normal" queries - you cannot re-use that with infinite queries.

[Venefilyn]

Ah yeah that is it. Is there a recommendation for separating API logic and components for infinite queries?

[TkDodo]

always use unique keys ?