server error with nextjs , and hydration in v5

[artainjast]

Describe the bug

server error with nextjs , and hydration in v5

Your minimal, reproducible example

https://stackblitz.com/github/tanstack/query/tree/main/examples/react/nextjs-app-prefetching?embed=1&theme=light&preset=node&file=src/index.tsx

Steps to reproduce

1. it does not need any steps , it occur when you starting the app (event on dev or production mode).

Expected behavior

as a user , i don't except this error happen , and it make some conflicts with building and compiling for production

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS : [MacOS - stackblitz]

Tanstack Query adapter

react-query

TanStack Query version

"^5.64.0" ,

TypeScript version

"5.7.2"

Additional context

No response

[TkDodo]

Thanks for filing. I’m not 100% sure what’s going on, but I debugged it a bit and the gist is that the initialPromise is passed as undefined to query.fetch here:

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

Lines 215 to 219 in bd3296b

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

That leads to us invoking the queryFn (because we have no promise to re-use), but the queryFn doesn’t exist yet, so it errors:

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

Line 153 in 18953be

promiseOrValue = initialPromise ?? config.fn()

When inspecting the promise we get from the server, it’s there, but initialPromise is still undefined:

@juliusmarminge does this have something to do with .then(deserializeData) ? Before that step, the promise seems to still be there. deserializeData is just our default one:

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

Lines 17 to 19 in bd3296b

	function defaultTransformerFn(data: any): any {
	return data
	}

[laksDev9]

Regarding this issue, could this be the reason that the data are not fetched in the server side?
As it can be seen in the provided link, the /pokemon api should be fetched on server side since it uses the prefetch, hydration and query client techniques. However, it can be observed in the chrome dev tools that the query is fetched in client side.

[artainjast]

Regarding this issue, could this be the reason that the data are not fetched in the server side? As it can be seen in the provided link, the /pokemon api should be fetched on render side since it is used the prefetch, hydration and query client techniques. However, it can be observed in the chrime dev tools that the query is rendered in client side.

Actually i follow that issue and reached here , i amazed why that happens. That is good question too