-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow to pass nonce to ReactQueryStreamedHydration #7352
Comments
Yes, do you want to PR it? |
@hey-kevin if this is still important to you, please file a PR. Otherwise, I'll close this issue as stale. |
@TkDodo hey! Sorry I think I missed your comment. Yes I will create a PR soon (probably in a week or two)! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: