Allow to pass nonce to ReactQueryStreamedHydration

[hey-kevin]

Describe the bug

Hello, many thanks for your hard work!

We are introducing the app router to some of our pages and we decided to use react-query with <ReactQueryStreamedHydration /> to do pre-fetch in SSR.

I understand the query result in the server is later hydrated in the client through the inline script tag created by useServerInsertedHTML in UseClientHydrationStreamProvider

My issue is that my CSP configuration with nonce prevents this inline script from running - hence the same query runs on the client 😭 (our CSP configuration is mostly copied from here).

Here is my ask:
Can we open a new prop called nonce for <ReactQueryStreamedHydration /> much similar to <ReactQueryDevtools />'s styleNonce prop to make sure the inline script gets executed properly?

Here is a screenshot of html generated from next.js with csp middleware implementation - as you can see only this inline tag did not get the blessing of nonce injection :(

Your minimal, reproducible example

https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy#adding-a-nonce-with-middleware

Steps to reproduce

1. Add a content security policy header for script-src that expects a nonce like the example above.
2. Include
3. Use useSuspenseQuery in the client component to fetch some data
4. See the console log like this
   

Expected behavior

The troublesome inline tag generated by ReactQueryStreamedHydration gets executed properly.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: MacOS
Browser: Version 124.0.6367.79 (Official Build) (arm64)

Tanstack Query adapter

react-query

TanStack Query version

v5.17.9

TypeScript version

No response

Additional context

FYI my @tanstack/react-query-next-experimental version is 5.20.5, but I don't see any nonce related implementation in the latest version of the source code

[TkDodo]

Yes, do you want to PR it?