feat(react-query-next-experimental): introduce nonce prop (#7575)

allow the inline script to be executed when CSP is enforced by including nonce to the script

Co-authored-by: Dominik Dorfmeister <[email protected]>

packages/react-query-next-experimental/src/HydrationStreamProvider.tsx

@@ -50,6 +50,10 @@ export interface HydrationStreamProviderProps<TShape> {
    * onFlush is called on the server when the cache is flushed
    */
   onFlush?: () => Array<TShape>
+  /**
+   * A nonce that'll allow the inline script to be executed when Content Security Policy is enforced
+   */
+  nonce?: string
 }
 
 export function createHydrationStreamProvider<TShape>() {
@@ -82,6 +86,10 @@ export function createHydrationStreamProvider<TShape>() {
      * onFlush is called on the server when the cache is flushed
      */
     onFlush?: () => Array<TShape>
+    /**
+     * A nonce that'll allow the inline script to be executed when Content Security Policy is enforced
+     */
+    nonce?: string
   }) {
     // unique id for the cache provider
     const id = `__RQ${React.useId()}`
@@ -131,6 +139,7 @@ export function createHydrationStreamProvider<TShape>() {
       return (
         <script
           key={count.current++}
+          nonce={props.nonce}
           dangerouslySetInnerHTML={{
             __html: html.join(''),
           }}

packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx

@@ -27,6 +27,7 @@ const stream = createHydrationStreamProvider<DehydratedState>()
 export function ReactQueryStreamedHydration(props: {
   children: React.ReactNode
   queryClient?: QueryClient
+  nonce?: string
   options?: {
     hydrate?: HydrateOptions
     dehydrate?: DehydrateOptions
@@ -87,6 +88,7 @@ export function ReactQueryStreamedHydration(props: {
       }}
       // Handle BigInts etc using superjson
       transformer={props.transformer}
+      nonce={props.nonce}
     >
       {props.children}
     </stream.Provider>