nextjs server compoent prefetch query with useSuspenseQuery call api multiple times

[asde29873012549]

Describe the bug

When using nextjs app router server component with queryClient.prefetchQuery and useSuspenseQuery to stream data as documented in your Advanced SSR doc. There are more api calls than it should be, inclusing 2 GET request in server, and one OPTIONS request and one GET request in the browser.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/ds7qkz

Steps to reproduce

1. Open terminal, refresh the page, you can see two GET request being log.
2. Open devtool, navigate to network tab, refresh the page, you can see one more GET request.

Expected behavior

It should be only one request from the server as the client will later receive the data and integrate with queryClient cache and no more api calls

How often does this bug happen?

Every time

Screenshots or Videos

Screen.Recording.2025-03-23.at.2.06.13.AM.mp4

Platform

OS: macOS
Browser: Chrome

Tanstack Query adapter

react-query

TanStack Query version

v5.51.9

TypeScript version

v.5.5.4

Additional context

No response

[TrevorBurnham]

Related to #8828.

[TkDodo]

The problem is you are not using your queryClientConfig everywhere. There are numerous places where you just call getQueryClient(), without passing a config. Not sure why you have this separation but it was really hard to see. Seems like over-separation to me.

Anyways, this has the effect that when you do prefetching, you haven’t set shouldDehydrateQuery so the pending promise is never hydrated. That will lead to useSuspenseQuery firing another request on the server, which is also ignored. Then, finally, the client will do the fetch that populates the cache.

If you use the same queryClientConfig everywhere (just inline it in getQueryClient!), you will see on fetch on the server only and no fetch on the client.