You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 :(
Add a content security policy header for script-src that expects a nonce like the example above.
Include
Use useSuspenseQuery in the client component to fetch some data
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
The text was updated successfully, but these errors were encountered:
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 UseClientHydrationStreamProviderMy 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 />
'sstyleNonce
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
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
The text was updated successfully, but these errors were encountered: