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

[TkDodo]

However, it can be observed in the chrome dev tools that the query is fetched in client side.

It is fetched on the client side because we don’t pass an initialPromise to query.fetch, so it tries to execute an actual fetch, without a queryFn (so this can’t work).

@juliusmarminge @Ephem this issue is baffling to me. maybe there is something that changed with next15 and using .then on this weird ReactPromise doesn’t work anymore?

[juliusmarminge]

hmm am i missing something? seems to work fine for me locally:

[TkDodo]

Huh,I was debugging it on stackbiltz (in a separate tab). Maybe it’s just a stackblitz issue then?

[juliusmarminge]

hmm yea - installed the same node version (18.20) locally and ran with that and still working fine

[Ephem]

Hm, works locally for me too. It's an interesting one though. For some reason we are still trying to fetch during SSR and not finding the queryFn when doing so, but when I add some basic logging for both the promise and the queryFn both seem to be there correctly. 🤔

[artainjast]

hmm am i missing something? seems to work fine for me locally:

i tried to implement this on nextjs 15.3 , and this happen yet . what react-query version you used ?

[TkDodo]

Closing this since it's working fine for anything but stackblitz.