Next.js: exception encountered in prefetchInfiniteQuery causes useSuspenseInfiniteQuery to fail

[robertzlatarski]

Describe the bug

I believe there is some weird behaviour when a prefetchInfiniteQuery fails in a server component and useSuspenseInfiniteQuery retries to fetch the data on the client. The exception thrown is: Uncaught TypeError: Cannot read properties of undefined (reading 'length'). I have spent some time debugging into this, it feels like after the failure on the server, the client retries to fetch the data and upon a successful response, it doesn't modify the response to be in the expected {pages: [], pageParams:[]} format, but treats it like a normal query response.

I have also noticed that query options passed are ignored (such as retry: 0).

Your minimal, reproducible example

https://codesandbox.io/p/devbox/9lyl7g

Steps to reproduce

The sandbox has an API endpoint that is setup to fail randomly. Verify that the hardcoded endpoint path is correct in pokemon.ts.

1. Restart sandbox browser until prefetch has failed
2. Observe an exception being thrown when a retry to /api request succeeds

Expected behavior

I expect it to work fine.

How often does this bug happen?

Always

Screenshots or Videos

Platform

• OS: MacOS
• Chrome
• Dependencies:

"next": "14.2.15",
"react": "18.3.1",
"react-dom": "18.3.1"

Tanstack Query adapter

None

TanStack Query version

5.62.7

TypeScript version

No response

Additional context

No response

[TkDodo]

you’re right. when you’re not awaiting data on the server, we’re streaming the promise down. However, on the client, we try to pick up the promise by calling query.fetch here:

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

Lines 235 to 237 in 6ca0eb7

	// this doesn't actually fetch - it just creates a retryer
	// which will re-use the passed `initialPromise`
	void query.fetch(undefined, { initialPromise })

However, for infinite queries, we need to attach the infiniteQueryBehavior, like we do in the queryClient:

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

Lines 475 to 481 in 4d8c27b

	options.behavior = infiniteQueryBehavior<
	TQueryFnData,
	TError,
	TData,
	TPageParam
	>(options.pages)
	return this.fetchQuery(options as any)

because that is what attaches the mechanism to transform data into { pages, pageParams }.

the conceptual problem I’m having now is that hydration doesn’t know about infinite / non-infinite query. There’s no information stored in the cache that knows about this.

here’s a more streamlined reproduction where the fetch always fails on the server and always succeeds on the client:

https://codesandbox.io/p/devbox/reverent-tree-forked-kwkm8p

@Ephem @juliusmarminge FYI

[Ephem]

Interesting! Just like with the max update depth bug I think this is another argument for not passing the promise itself down, we need to wrap it with more metadata.