search

TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
42.53k stars 2.91k forks source link

Allow to pass nonce to ReactQueryStreamedHydration #7352

Closed hey-kevin closed 5 months ago

hey-kevin commented 6 months ago

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 :( image

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 image

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 commented 6 months ago

Yes, do you want to PR it?

TkDodo commented 5 months ago

@hey-kevin if this is still important to you, please file a PR. Otherwise, I'll close this issue as stale.

hey-kevin commented 5 months ago

@TkDodo hey! Sorry I think I missed your comment. Yes I will create a PR soon (probably in a week or two)!

hey-kevin commented 5 months ago

@TkDodo just created a PR https://github.com/TanStack/query/pull/7575 for this issue, thx in advance!