From 42c4613b66933413c4e62d5b7cbc745dcb6fb936 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sat, 17 Jun 2023 14:29:12 +0200
Subject: [PATCH 01/24] chore: fix a copy-paste error

---
 packages/react-query-devtools/vitest.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-query-devtools/vitest.config.ts b/packages/react-query-devtools/vitest.config.ts
index 70eec41e33..f61709f2fc 100644
--- a/packages/react-query-devtools/vitest.config.ts
+++ b/packages/react-query-devtools/vitest.config.ts
@@ -2,7 +2,7 @@ import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   test: {
-    name: 'react-query-persist-client',
+    name: 'react-query-devtools',
     dir: './src',
     watch: false,
     setupFiles: ['test-setup.ts'],

From 5777555f7f09afc157eafd55e7ea297efe7c6440 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sat, 17 Jun 2023 14:37:33 +0200
Subject: [PATCH 02/24] chore: bootstrap package

---
 .../.eslintrc.cjs                             |  16 ++
 .../package.json                              |  57 ++++++
 .../rollup.config.js                          |  12 ++
 .../src/HydrationStreamProvider.tsx           | 192 ++++++++++++++++++
 .../src/ReactQueryStreamedHydration.tsx       |  89 ++++++++
 .../src/index.ts                              |   3 +
 .../test-setup.ts                             |   7 +
 .../tsconfig.eslint.json                      |   7 +
 .../tsconfig.json                             |   9 +
 .../vitest.config.ts                          |  13 ++
 packages/react-query/package.json             |   2 +-
 pnpm-lock.yaml                                | 171 +++++++++++++++-
 12 files changed, 571 insertions(+), 7 deletions(-)
 create mode 100644 packages/react-query-next-experimental/.eslintrc.cjs
 create mode 100644 packages/react-query-next-experimental/package.json
 create mode 100644 packages/react-query-next-experimental/rollup.config.js
 create mode 100644 packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
 create mode 100644 packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
 create mode 100644 packages/react-query-next-experimental/src/index.ts
 create mode 100644 packages/react-query-next-experimental/test-setup.ts
 create mode 100644 packages/react-query-next-experimental/tsconfig.eslint.json
 create mode 100644 packages/react-query-next-experimental/tsconfig.json
 create mode 100644 packages/react-query-next-experimental/vitest.config.ts

diff --git a/packages/react-query-next-experimental/.eslintrc.cjs b/packages/react-query-next-experimental/.eslintrc.cjs
new file mode 100644
index 0000000000..a9fa6e620d
--- /dev/null
+++ b/packages/react-query-next-experimental/.eslintrc.cjs
@@ -0,0 +1,16 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.eslint.json',
+  },
+  rules: {
+    'react/jsx-key': ['error', { checkFragmentShorthand: true }],
+    'react-hooks/exhaustive-deps': 'error',
+  },
+}
+
+module.exports = config
diff --git a/packages/react-query-next-experimental/package.json b/packages/react-query-next-experimental/package.json
new file mode 100644
index 0000000000..0b3194027d
--- /dev/null
+++ b/packages/react-query-next-experimental/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "@tanstack/react-query-next-experimental",
+  "version": "5.0.0-alpha.67",
+  "description": "Hydration utils for React Query in the NextJs app directory",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": "tanstack/query",
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "type": "module",
+  "types": "build/lib/index.d.ts",
+  "main": "build/lib/index.legacy.cjs",
+  "module": "build/lib/index.legacy.js",
+  "exports": {
+    ".": {
+      "types": "./build/lib/index.d.ts",
+      "import": "./build/lib/index.js",
+      "require": "./build/lib/index.cjs",
+      "default": "./build/lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "build/lib/*",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./coverage",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc --noEmit",
+    "test:lib": "vitest run --coverage",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "pnpm build:rollup && pnpm build:types",
+    "build:rollup": "rollup --config rollup.config.js",
+    "build:types": "tsc --emitDeclarationOnly && cpy index.d.ts index.prod.d.ts --cwd=build/lib"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "workspace:*",
+    "@types/react": "^18.2.4",
+    "@types/react-dom": "^18.2.4",
+    "next": "^13.4.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^3.1.4"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "workspace:*",
+    "next": "^13.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}
diff --git a/packages/react-query-next-experimental/rollup.config.js b/packages/react-query-next-experimental/rollup.config.js
new file mode 100644
index 0000000000..149a2f25d5
--- /dev/null
+++ b/packages/react-query-next-experimental/rollup.config.js
@@ -0,0 +1,12 @@
+// @ts-check
+
+import { defineConfig } from 'rollup'
+import { buildConfigs } from '../../scripts/getRollupConfig.js'
+
+export default defineConfig(
+  buildConfigs({
+    name: 'react-query-next-experimental',
+    outputFile: 'index',
+    entryFile: './src/index.ts',
+  }),
+)
diff --git a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
new file mode 100644
index 0000000000..82f2111c12
--- /dev/null
+++ b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
@@ -0,0 +1,192 @@
+'use client'
+
+import { useServerInsertedHTML } from 'next/navigation'
+import * as React from 'react'
+
+const serializedSymbol = Symbol('serialized')
+
+interface DataTransformer {
+  serialize(object: any): any
+  deserialize(object: any): any
+}
+
+type Serialized<TData> = unknown & {
+  [serializedSymbol]: TData
+}
+
+interface TypedDataTransformer<TData> {
+  serialize: (obj: TData) => Serialized<TData>
+  deserialize: (obj: Serialized<TData>) => TData
+}
+
+interface HydrationStreamContext<TShape> {
+  id: string
+  stream: {
+    /**
+     * **Server method**
+     * Push a new entry to the stream
+     * Will be ignored on the client
+     */
+    push: (...shape: TShape[]) => void
+  }
+}
+
+export interface HydrationStreamProviderProps<TShape> {
+  children: React.ReactNode
+  /**
+   * Optional transformer to serialize/deserialize the data
+   * Example devalue, superjson et al
+   */
+  transformer?: DataTransformer
+  /**
+   * **Client method**
+   * Called in the browser when new entries are received
+   */
+  onEntries: (entries: TShape[]) => void
+  /**
+   * **Server method**
+   * onFlush is called on the server when the cache is flushed
+   */
+  onFlush?: () => TShape[]
+}
+
+export function createHydrationStreamProvider<TShape>() {
+  const context = React.createContext<HydrationStreamContext<TShape>>(null as any)
+  /**
+
+   * 1. (Happens on server): `useServerInsertedHTML()` is called **on the server** whenever a `Suspense`-boundary completes
+   *    - This means that we might have some new entries in the cache that needs to be flushed
+   *    - We pass these to the client by inserting a `<script>`-tag where we do `window[id].push(serializedVersionOfCache)`
+   * 2. (Happens in browser) In `useEffect()`:
+   *   - We check if `window[id]` is set to an array and call `push()` on all the entries which will call `onEntries()` with the new entries
+   *   - We replace `window[id]` with a `push()`-method that will be called whenever new entries are received
+   **/
+  function UseClientHydrationStreamProvider(props: {
+    children: React.ReactNode
+    /**
+     * Optional transformer to serialize/deserialize the data
+     * Example devalue, superjson et al
+     */
+    transformer?: DataTransformer
+    /**
+     * **Client method**
+     * Called in the browser when new entries are received
+     */
+    onEntries: (entries: TShape[]) => void
+    /**
+     * **Server method**
+     * onFlush is called on the server when the cache is flushed
+     */
+    onFlush?: () => TShape[]
+  }) {
+    // unique id for the cache provider
+    const id = `_${React.useId()}`
+    const idJSON = JSON.stringify(id)
+
+    const [transformer] = React.useState(
+      () =>
+        (props.transformer ?? {
+          // noop
+          serialize: (obj: any) => obj,
+          deserialize: (obj: any) => obj,
+        }) as unknown as TypedDataTransformer<TShape>,
+    )
+
+    // <server stuff>
+    const [stream] = React.useState<TShape[]>(() => {
+      if (typeof window !== 'undefined') {
+        return {
+          push() {
+            // no-op on the client
+          },
+        } as unknown as TShape[]
+      }
+      return []
+    })
+    const count = React.useRef(0)
+    const onDehydrateRef = React.useRef(props.onFlush)
+    onDehydrateRef.current = props.onFlush
+    useServerInsertedHTML(() => {
+      // This only happens on the server
+      stream.push(...(onDehydrateRef.current?.() ?? []))
+
+      if (!stream.length) {
+        return null
+      }
+      // console.log(`pushing ${stream.length} entries`)
+      const serializedCacheArgs = stream
+        .map((entry) => transformer.serialize(entry))
+        .map((entry) => JSON.stringify(entry))
+        .join(',')
+
+      // Flush stream
+      stream.length = 0
+
+      const html: string[] = [
+        `window[${idJSON}] = window[${idJSON}] || [];`,
+        `window[${idJSON}].push(${serializedCacheArgs});`,
+      ]
+      return (
+        <script
+          key={count.current++}
+          dangerouslySetInnerHTML={{
+            __html: html.join(''),
+          }}
+        />
+      )
+    })
+    // </server stuff>
+
+    // <client stuff>
+    const onEntriesRef = React.useRef(props.onEntries)
+    onEntriesRef.current = props.onEntries
+
+    // Client: consume cache:
+    const onEntries = React.useCallback(
+      (...serializedEntries: Serialized<TShape>[]) => {
+        const entries = serializedEntries.map((serialized) =>
+          transformer.deserialize(serialized),
+        )
+        onEntriesRef.current(entries)
+      },
+      [transformer],
+    )
+
+    React.useEffect(() => {
+      const win = window as any
+      // Register cache consumer
+      const stream: Array<Serialized<TShape>> = win[id] ?? []
+
+      if (!Array.isArray(stream)) {
+        throw new Error(`${id} seem to have been registered twice`)
+      }
+      onEntries(...stream)
+
+      // Register our own consumer
+      win[id] = {
+        push: onEntries,
+      }
+
+      return () => {
+        // Cleanup after unmount
+        win[id] = {
+          push() {
+            // no-op
+          },
+        }
+      }
+    }, [id, onEntries])
+    // </client stuff>
+
+    return (
+      <context.Provider value={{ stream, id }}>
+        {props.children}
+      </context.Provider>
+    )
+  }
+
+  return {
+    Provider: UseClientHydrationStreamProvider,
+    context,
+  }
+}
diff --git a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
new file mode 100644
index 0000000000..8893b9d498
--- /dev/null
+++ b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
@@ -0,0 +1,89 @@
+'use client'
+
+import type { ContextOptions, DehydratedState } from '@tanstack/react-query'
+import { dehydrate, hydrate, useQueryClient } from '@tanstack/react-query'
+import * as React from 'react'
+import type { HydrationStreamProviderProps } from './HydrationStreamProvider'
+import { createHydrationStreamProvider } from './HydrationStreamProvider'
+
+const stream = createHydrationStreamProvider<DehydratedState>()
+
+/**
+ * This component is responsible for:
+ * - hydrating the query client on the server
+ * - dehydrating the query client on the server
+ */
+export function ReactQueryStreamedHydration(props: {
+  children: React.ReactNode
+  context?: ContextOptions['context']
+  transformer?: HydrationStreamProviderProps<DehydratedState>['transformer']
+}) {
+  const queryClient = useQueryClient({
+    context: props.context,
+  })
+
+  // <server only>
+  const isSubscribed = React.useRef(false)
+  /**
+   * We need to track which queries were added/updated during the render
+   */
+  const [trackedKeys] = React.useState(() => new Set<string>())
+  /**
+   * Track which queries were already passed to the client so we don't pass them again
+   */
+  // const [passedKeys] = useState(() => new Set<string>());
+
+  const cache = queryClient.getQueryCache()
+
+  if (typeof window === 'undefined' && !isSubscribed.current) {
+    // Do we need to care about unsubscribing? I don't think so to be honest
+    cache.subscribe((event) => {
+      switch (event.type) {
+        case 'added':
+        case 'updated':
+          // console.log('tracking', event.query.queryHash, 'b/c of a', event.type)
+          trackedKeys.add(event.query.queryHash)
+      }
+    })
+  }
+  // </server only>
+
+  return (
+    <stream.Provider
+      // Happens on server:
+      onFlush={() => {
+        /**
+         * Dehydrated state of the client where we only include the queries that were added/updated since the last flush
+         */
+        const dehydratedState = dehydrate(queryClient, {
+          shouldDehydrateQuery(query) {
+            const shouldDehydrate =
+              trackedKeys.has(query.queryHash) &&
+              // !passedKeys.has(query.queryHash) &&
+              query.state.status !== 'loading'
+
+            // passedKeys.add(query.queryHash);
+            return shouldDehydrate
+          },
+        })
+        trackedKeys.clear()
+
+        if (!dehydratedState.queries.length) {
+          return []
+        }
+
+        return [dehydratedState]
+      }}
+      // Happens in browser:
+      onEntries={(entries) => {
+        for (const hydratedState of entries) {
+          hydrate(queryClient, hydratedState)
+        }
+      }}
+      // Handle BigInts etc using superjson
+      transformer={props.transformer}
+    >
+      {props.children}
+    </stream.Provider>
+  )
+}
diff --git a/packages/react-query-next-experimental/src/index.ts b/packages/react-query-next-experimental/src/index.ts
new file mode 100644
index 0000000000..1cf011b19f
--- /dev/null
+++ b/packages/react-query-next-experimental/src/index.ts
@@ -0,0 +1,3 @@
+'use client'
+
+export { ReactQueryStreamedHydration } from './ReactQueryStreamedHydration'
diff --git a/packages/react-query-next-experimental/test-setup.ts b/packages/react-query-next-experimental/test-setup.ts
new file mode 100644
index 0000000000..e184eb4e20
--- /dev/null
+++ b/packages/react-query-next-experimental/test-setup.ts
@@ -0,0 +1,7 @@
+import { act } from '@testing-library/react'
+import { notifyManager } from '@tanstack/react-query'
+
+// Wrap notifications with act to make sure React knows about React Query updates
+notifyManager.setNotifyFunction((fn) => {
+  act(fn)
+})
diff --git a/packages/react-query-next-experimental/tsconfig.eslint.json b/packages/react-query-next-experimental/tsconfig.eslint.json
new file mode 100644
index 0000000000..b15f4d23ab
--- /dev/null
+++ b/packages/react-query-next-experimental/tsconfig.eslint.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".eslintrc.cjs", "rollup.config.js"]
+}
diff --git a/packages/react-query-next-experimental/tsconfig.json b/packages/react-query-next-experimental/tsconfig.json
new file mode 100644
index 0000000000..355947674b
--- /dev/null
+++ b/packages/react-query-next-experimental/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "outDir": "./build/lib",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src"]
+}
diff --git a/packages/react-query-next-experimental/vitest.config.ts b/packages/react-query-next-experimental/vitest.config.ts
new file mode 100644
index 0000000000..825735aae8
--- /dev/null
+++ b/packages/react-query-next-experimental/vitest.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    name: 'react-query-next-experimental',
+    dir: './src',
+    watch: false,
+    setupFiles: ['test-setup.ts'],
+    environment: 'jsdom',
+    globals: true,
+    coverage: { provider: 'istanbul' },
+  },
+})
diff --git a/packages/react-query/package.json b/packages/react-query/package.json
index 6e60a42b2a..a4bb22439d 100644
--- a/packages/react-query/package.json
+++ b/packages/react-query/package.json
@@ -45,7 +45,7 @@
     "!build/codemods/**/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-core": "^5.0.0-alpha.43"
+    "@tanstack/query-core": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^18.2.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 993e5b0b86..f40a1c877b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1423,7 +1423,7 @@ importers:
   packages/react-query:
     dependencies:
       '@tanstack/query-core':
-        specifier: ^5.0.0-alpha.43
+        specifier: workspace:*
         version: link:../query-core
       react-native:
         specifier: '*'
@@ -1470,6 +1470,30 @@ importers:
         specifier: ^3.1.4
         version: 3.1.4(react@18.2.0)
 
+  packages/react-query-next-experimental:
+    devDependencies:
+      '@tanstack/react-query':
+        specifier: workspace:*
+        version: link:../react-query
+      '@types/react':
+        specifier: ^18.2.4
+        version: 18.2.7
+      '@types/react-dom':
+        specifier: ^18.2.4
+        version: 18.2.4
+      next:
+        specifier: ^13.4.6
+        version: 13.4.6(@babel/core@7.21.8)(react-dom@18.2.0)(react@18.2.0)
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+      react-error-boundary:
+        specifier: ^3.1.4
+        version: 3.1.4(react@18.2.0)
+
   packages/react-query-persist-client:
     dependencies:
       '@tanstack/query-persist-client-core':
@@ -4216,6 +4240,10 @@ packages:
     resolution: {integrity: sha512-q/y7VZj/9YpgzDe64Zi6rY1xPizx80JjlU2BTevlajtaE3w1LqweH1gGgxou2N7hdFosXHjGrI4OUvtFXXhGLg==}
     dev: false
 
+  /@next/env@13.4.6:
+    resolution: {integrity: sha512-nqUxEtvDqFhmV1/awSg0K2XHNwkftNaiUqCYO9e6+MYmqNObpKVl7OgMkGaQ2SZnFx5YqF0t60ZJTlyJIDAijg==}
+    dev: true
+
   /@next/swc-darwin-arm64@13.4.4:
     resolution: {integrity: sha512-xfjgXvp4KalNUKZMHmsFxr1Ug+aGmmO6NWP0uoh4G3WFqP/mJ1xxfww0gMOeMeSq/Jyr5k7DvoZ2Pv+XOITTtw==}
     engines: {node: '>= 10'}
@@ -4225,6 +4253,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-darwin-arm64@13.4.6:
+    resolution: {integrity: sha512-ahi6VP98o4HV19rkOXPSUu+ovfHfUxbJQ7VVJ7gL2FnZRr7onEFC1oGQ6NQHpm8CxpIzSSBW79kumlFMOmZVjg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@next/swc-darwin-x64@13.4.4:
     resolution: {integrity: sha512-ZY9Ti1hkIwJsxGus3nlubIkvYyB0gNOYxKrfsOrLEqD0I2iCX8D7w8v6QQZ2H+dDl6UT29oeEUdDUNGk4UEpfg==}
     engines: {node: '>= 10'}
@@ -4234,6 +4271,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-darwin-x64@13.4.6:
+    resolution: {integrity: sha512-13cXxKFsPJIJKzUqrU5XB1mc0xbUgYsRcdH6/rB8c4NMEbWGdtD4QoK9ShN31TZdePpD4k416Ur7p+deMIxnnA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@next/swc-linux-arm64-gnu@13.4.4:
     resolution: {integrity: sha512-+KZnDeMShYkpkqAvGCEDeqYTRADJXc6SY1jWXz+Uo6qWQO/Jd9CoyhTJwRSxvQA16MoYzvILkGaDqirkRNctyA==}
     engines: {node: '>= 10'}
@@ -4243,6 +4289,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-arm64-gnu@13.4.6:
+    resolution: {integrity: sha512-Ti+NMHEjTNktCVxNjeWbYgmZvA2AqMMI2AMlzkXsU7W4pXCMhrryAmAIoo+7YdJbsx01JQWYVxGe62G6DoCLaA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@next/swc-linux-arm64-musl@13.4.4:
     resolution: {integrity: sha512-evC1twrny2XDT4uOftoubZvW3EG0zs0ZxMwEtu/dDGVRO5n5pT48S8qqEIBGBUZYu/Xx4zzpOkIxx1vpWdE+9A==}
     engines: {node: '>= 10'}
@@ -4252,6 +4307,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-arm64-musl@13.4.6:
+    resolution: {integrity: sha512-OHoC6gO7XfjstgwR+z6UHKlvhqJfyMtNaJidjx3sEcfaDwS7R2lqR5AABi8PuilGgi0BO0O0sCXqLlpp3a0emQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@next/swc-linux-x64-gnu@13.4.4:
     resolution: {integrity: sha512-PX706XcCHr2FfkyhP2lpf+pX/tUvq6/ke7JYnnr0ykNdEMo+sb7cC/o91gnURh4sPYSiZJhsF2gbIqg9rciOHQ==}
     engines: {node: '>= 10'}
@@ -4261,6 +4325,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-x64-gnu@13.4.6:
+    resolution: {integrity: sha512-zHZxPGkUlpfNJCboUrFqwlwEX5vI9LSN70b8XEb0DYzzlrZyCyOi7hwDp/+3Urm9AB7YCAJkgR5Sp1XBVjHdfQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@next/swc-linux-x64-musl@13.4.4:
     resolution: {integrity: sha512-TKUUx3Ftd95JlHV6XagEnqpT204Y+IsEa3awaYIjayn0MOGjgKZMZibqarK3B1FsMSPaieJf2FEAcu9z0yT5aA==}
     engines: {node: '>= 10'}
@@ -4270,6 +4343,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-x64-musl@13.4.6:
+    resolution: {integrity: sha512-K/Y8lYGTwTpv5ME8PSJxwxLolaDRdVy+lOd9yMRMiQE0BLUhtxtCWC9ypV42uh9WpLjoaD0joOsB9Q6mbrSGJg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@next/swc-win32-arm64-msvc@13.4.4:
     resolution: {integrity: sha512-FP8AadgSq4+HPtim7WBkCMGbhr5vh9FePXiWx9+YOdjwdQocwoCK5ZVC3OW8oh3TWth6iJ0AXJ/yQ1q1cwSZ3A==}
     engines: {node: '>= 10'}
@@ -4279,6 +4361,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-win32-arm64-msvc@13.4.6:
+    resolution: {integrity: sha512-U6LtxEUrjBL2tpW+Kr1nHCSJWNeIed7U7l5o7FiKGGwGgIlFi4UHDiLI6TQ2lxi20fAU33CsruV3U0GuzMlXIw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@next/swc-win32-ia32-msvc@13.4.4:
     resolution: {integrity: sha512-3WekVmtuA2MCdcAOrgrI+PuFiFURtSyyrN1I3UPtS0ckR2HtLqyqmS334Eulf15g1/bdwMteePdK363X/Y9JMg==}
     engines: {node: '>= 10'}
@@ -4288,6 +4379,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-win32-ia32-msvc@13.4.6:
+    resolution: {integrity: sha512-eEBeAqpCfhdPSlCZCayjCiyIllVqy4tcqvm1xmg3BgJG0G5ITiMM4Cw2WVeRSgWDJqQGRyyb+q8Y2ltzhXOWsQ==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@next/swc-win32-x64-msvc@13.4.4:
     resolution: {integrity: sha512-AHRITu/CrlQ+qzoqQtEMfaTu7GHaQ6bziQln/pVWpOYC1wU+Mq6VQQFlsDtMCnDztPZtppAXdvvbNS7pcfRzlw==}
     engines: {node: '>= 10'}
@@ -4297,6 +4397,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-win32-x64-msvc@13.4.6:
+    resolution: {integrity: sha512-OrZs94AuO3ZS5tnqlyPRNgfWvboXaDQCi5aXGve3o3C+Sj0ctMUV9+Do+0zMvvLRumR8E0PTWKvtz9n5vzIsWw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1:
     resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
     dependencies:
@@ -5325,7 +5434,6 @@ packages:
     resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==}
     dependencies:
       tslib: 2.5.2
-    dev: false
 
   /@tanstack/match-sorter-utils@8.8.4:
     resolution: {integrity: sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==}
@@ -7083,7 +7191,6 @@ packages:
 
   /client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-    dev: false
 
   /cliui@6.0.0:
     resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
@@ -9623,6 +9730,10 @@ packages:
       is-glob: 4.0.3
     dev: true
 
+  /glob-to-regexp@0.4.1:
+    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
+    dev: true
+
   /glob@10.2.6:
     resolution: {integrity: sha512-U/rnDpXJGF414QQQZv5uVsabTVxMSwzS5CH0p3DRCIV6ownl4f7PzGnkGmvlum2wB+9RlJWJZ6ACU1INnBqiPA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -12481,6 +12592,49 @@ packages:
       - babel-plugin-macros
     dev: false
 
+  /next@13.4.6(@babel/core@7.21.8)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-sjVqjxU+U2aXZnYt4Ud6CTLNNwWjdSfMgemGpIQJcN3Z7Jni9xRWbR0ie5fQzCg87aLqQVhKA2ud2gPoqJ9lGw==}
+    engines: {node: '>=16.8.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      fibers: '>= 3.1.0'
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      fibers:
+        optional: true
+      sass:
+        optional: true
+    dependencies:
+      '@next/env': 13.4.6
+      '@swc/helpers': 0.5.1
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001489
+      postcss: 8.4.14
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      styled-jsx: 5.1.1(@babel/core@7.21.8)(react@18.2.0)
+      watchpack: 2.4.0
+      zod: 3.21.4
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 13.4.6
+      '@next/swc-darwin-x64': 13.4.6
+      '@next/swc-linux-arm64-gnu': 13.4.6
+      '@next/swc-linux-arm64-musl': 13.4.6
+      '@next/swc-linux-x64-gnu': 13.4.6
+      '@next/swc-linux-x64-musl': 13.4.6
+      '@next/swc-win32-arm64-msvc': 13.4.6
+      '@next/swc-win32-ia32-msvc': 13.4.6
+      '@next/swc-win32-x64-msvc': 13.4.6
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+    dev: true
+
   /nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
     dev: false
@@ -13343,7 +13497,6 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: false
 
   /postcss@8.4.23:
     resolution: {integrity: sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==}
@@ -15248,7 +15401,6 @@ packages:
       '@babel/core': 7.21.8
       client-only: 0.0.1
       react: 18.2.0
-    dev: false
 
   /styleq@0.1.3:
     resolution: {integrity: sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA==}
@@ -16404,6 +16556,14 @@ packages:
     resolution: {integrity: sha512-recZTSvuaH/On5ZU5ywq66y99lImWqzP93+AiUo9LUwG8gXHW+LJjhOd6REJHm7qb0niYqrEQJvbHSQfuJtTqA==}
     dev: false
 
+  /watchpack@2.4.0:
+    resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.10
+    dev: true
+
   /wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
     dependencies:
@@ -16780,4 +16940,3 @@ packages:
 
   /zod@3.21.4:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
-    dev: false

From f6344cabdfd31e8617ee5b9bdd91426216bd488f Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sat, 17 Jun 2023 14:41:56 +0200
Subject: [PATCH 03/24] chore: setup package

---
 scripts/config.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/scripts/config.js b/scripts/config.js
index b9f8dfd995..55a0851bee 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -58,6 +58,11 @@ export const packages = [
     packageDir: 'packages/react-query-persist-client',
     entries: ['main', 'module', 'types'],
   },
+  {
+    name: '@tanstack/react-query-next-experimental',
+    packageDir: 'packages/react-query-next-experimental',
+    entries: ['main', 'module', 'types'],
+  },
   {
     name: '@tanstack/solid-query',
     packageDir: 'packages/solid-query',

From 526c2e36084e3e4b4b5904c2a07014ef939ae903 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sat, 17 Jun 2023 14:43:14 +0200
Subject: [PATCH 04/24] chore: allow passing with no tests

---
 packages/react-query-next-experimental/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-query-next-experimental/package.json b/packages/react-query-next-experimental/package.json
index 0b3194027d..586a1b8e97 100644
--- a/packages/react-query-next-experimental/package.json
+++ b/packages/react-query-next-experimental/package.json
@@ -32,7 +32,7 @@
     "clean": "rimraf ./build && rimraf ./coverage",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
     "test:types": "tsc --noEmit",
-    "test:lib": "vitest run --coverage",
+    "test:lib": "vitest run --coverage --passWithNoTests",
     "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict",
     "build": "pnpm build:rollup && pnpm build:types",

From dd7233cd71c2c8c0c7f30536478cf0d7ad204323 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sat, 17 Jun 2023 14:44:41 +0200
Subject: [PATCH 05/24] fix: remove 'use client' from index bundle

---
 packages/react-query-next-experimental/src/index.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-query-next-experimental/src/index.ts b/packages/react-query-next-experimental/src/index.ts
index 1cf011b19f..594e0011d7 100644
--- a/packages/react-query-next-experimental/src/index.ts
+++ b/packages/react-query-next-experimental/src/index.ts
@@ -1,3 +1 @@
-'use client'
-
 export { ReactQueryStreamedHydration } from './ReactQueryStreamedHydration'

From 6ddb1ca446a430b5c549e54c78411942a87ea795 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sat, 17 Jun 2023 14:50:07 +0200
Subject: [PATCH 06/24] chore: cleanup copy/paste error

---
 packages/react-query-next-experimental/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-query-next-experimental/package.json b/packages/react-query-next-experimental/package.json
index 586a1b8e97..a7d357eafc 100644
--- a/packages/react-query-next-experimental/package.json
+++ b/packages/react-query-next-experimental/package.json
@@ -37,7 +37,7 @@
     "test:build": "publint --strict",
     "build": "pnpm build:rollup && pnpm build:types",
     "build:rollup": "rollup --config rollup.config.js",
-    "build:types": "tsc --emitDeclarationOnly && cpy index.d.ts index.prod.d.ts --cwd=build/lib"
+    "build:types": "tsc --emitDeclarationOnly"
   },
   "devDependencies": {
     "@tanstack/react-query": "workspace:*",

From 2d7265ba2f6d3dec25d4c10a38632186746dd351 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sat, 17 Jun 2023 14:59:48 +0200
Subject: [PATCH 07/24] chore: fix prettier

---
 .../src/HydrationStreamProvider.tsx                           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
index 82f2111c12..5696118002 100644
--- a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
+++ b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
@@ -51,7 +51,9 @@ export interface HydrationStreamProviderProps<TShape> {
 }
 
 export function createHydrationStreamProvider<TShape>() {
-  const context = React.createContext<HydrationStreamContext<TShape>>(null as any)
+  const context = React.createContext<HydrationStreamContext<TShape>>(
+    null as any,
+  )
   /**
 
    * 1. (Happens on server): `useServerInsertedHTML()` is called **on the server** whenever a `Suspense`-boundary completes

From c428e49e55e6898b7cf19e0061b222dae9c601d2 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sun, 18 Jun 2023 18:57:04 +0200
Subject: [PATCH 08/24] refactor: replace ref with direct props access

---
 .../src/HydrationStreamProvider.tsx                           | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
index 5696118002..351c4ac313 100644
--- a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
+++ b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
@@ -106,11 +106,9 @@ export function createHydrationStreamProvider<TShape>() {
       return []
     })
     const count = React.useRef(0)
-    const onDehydrateRef = React.useRef(props.onFlush)
-    onDehydrateRef.current = props.onFlush
     useServerInsertedHTML(() => {
       // This only happens on the server
-      stream.push(...(onDehydrateRef.current?.() ?? []))
+      stream.push(...(props.onFlush?.() ?? []))
 
       if (!stream.length) {
         return null

From 40efb37bf796d91e11941e0ec35483522fbc4dd4 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sun, 18 Jun 2023 18:57:53 +0200
Subject: [PATCH 09/24] fix: do not write to refs during render

---
 .../src/HydrationStreamProvider.tsx                           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
index 351c4ac313..6bc1bda86c 100644
--- a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
+++ b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
@@ -139,7 +139,9 @@ export function createHydrationStreamProvider<TShape>() {
 
     // <client stuff>
     const onEntriesRef = React.useRef(props.onEntries)
-    onEntriesRef.current = props.onEntries
+    React.useEffect(() => {
+      onEntriesRef.current = props.onEntries
+    })
 
     // Client: consume cache:
     const onEntries = React.useCallback(

From 73367547547c2a02e79200cc8cedf6e6ddfb63cb Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sun, 18 Jun 2023 18:58:55 +0200
Subject: [PATCH 10/24] refactor: inline function into useEffect to avoid
 useCallback

---
 .../src/HydrationStreamProvider.tsx                 | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
index 6bc1bda86c..3f5ba4c7b5 100644
--- a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
+++ b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
@@ -143,18 +143,15 @@ export function createHydrationStreamProvider<TShape>() {
       onEntriesRef.current = props.onEntries
     })
 
-    // Client: consume cache:
-    const onEntries = React.useCallback(
-      (...serializedEntries: Serialized<TShape>[]) => {
+    React.useEffect(() => {
+      // Client: consume cache:
+      const onEntries = (...serializedEntries: Serialized<TShape>[]) => {
         const entries = serializedEntries.map((serialized) =>
           transformer.deserialize(serialized),
         )
         onEntriesRef.current(entries)
-      },
-      [transformer],
-    )
+      }
 
-    React.useEffect(() => {
       const win = window as any
       // Register cache consumer
       const stream: Array<Serialized<TShape>> = win[id] ?? []
@@ -177,7 +174,7 @@ export function createHydrationStreamProvider<TShape>() {
           },
         }
       }
-    }, [id, onEntries])
+    }, [id, transformer])
     // </client stuff>
 
     return (

From c5169c548e8d66f0b8f9a7d5e7bb5e3a681af79d Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sun, 18 Jun 2023 18:59:45 +0200
Subject: [PATCH 11/24] fix: eslint no-shadow

---
 .../src/HydrationStreamProvider.tsx                         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
index 3f5ba4c7b5..ea113b79d4 100644
--- a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
+++ b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
@@ -154,12 +154,12 @@ export function createHydrationStreamProvider<TShape>() {
 
       const win = window as any
       // Register cache consumer
-      const stream: Array<Serialized<TShape>> = win[id] ?? []
+      const winStream: Array<Serialized<TShape>> = win[id] ?? []
 
-      if (!Array.isArray(stream)) {
+      if (!Array.isArray(winStream)) {
         throw new Error(`${id} seem to have been registered twice`)
       }
-      onEntries(...stream)
+      onEntries(...winStream)
 
       // Register our own consumer
       win[id] = {

From fede312ccd6653329d5c0885e4104adc4b9200c8 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sun, 18 Jun 2023 19:00:39 +0200
Subject: [PATCH 12/24] refactor: namespace id

---
 .../src/HydrationStreamProvider.tsx                             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
index ea113b79d4..2e88d5642e 100644
--- a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
+++ b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
@@ -82,7 +82,7 @@ export function createHydrationStreamProvider<TShape>() {
     onFlush?: () => TShape[]
   }) {
     // unique id for the cache provider
-    const id = `_${React.useId()}`
+    const id = `__RQ${React.useId()}`
     const idJSON = JSON.stringify(id)
 
     const [transformer] = React.useState(

From 9ce95136eac473909be8575ea42d3415b4dbcf5e Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sun, 18 Jun 2023 19:02:46 +0200
Subject: [PATCH 13/24] refactor: removed pointless check

---
 .../src/HydrationStreamProvider.tsx                            | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
index 2e88d5642e..591105606d 100644
--- a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
+++ b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
@@ -156,9 +156,6 @@ export function createHydrationStreamProvider<TShape>() {
       // Register cache consumer
       const winStream: Array<Serialized<TShape>> = win[id] ?? []
 
-      if (!Array.isArray(winStream)) {
-        throw new Error(`${id} seem to have been registered twice`)
-      }
       onEntries(...winStream)
 
       // Register our own consumer

From a83ca67b01d7999b00854bec603b1e8387a4181c Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sun, 18 Jun 2023 19:03:36 +0200
Subject: [PATCH 14/24] fix: set to empty array on cleanup

---
 .../src/HydrationStreamProvider.tsx                         | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
index 591105606d..7b8699049d 100644
--- a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
+++ b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
@@ -165,11 +165,7 @@ export function createHydrationStreamProvider<TShape>() {
 
       return () => {
         // Cleanup after unmount
-        win[id] = {
-          push() {
-            // no-op
-          },
-        }
+        win[id] = []
       }
     }, [id, transformer])
     // </client stuff>

From 09ac0238431afabc205fdbb57b1ca4cb8388e5c0 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Mon, 19 Jun 2023 10:40:23 +0200
Subject: [PATCH 15/24] fix: adapt for v5 changes

---
 .../src/ReactQueryStreamedHydration.tsx                | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
index 8893b9d498..e17b9d954a 100644
--- a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
+++ b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import type { ContextOptions, DehydratedState } from '@tanstack/react-query'
+import type { DehydratedState, QueryClient } from '@tanstack/react-query'
 import { dehydrate, hydrate, useQueryClient } from '@tanstack/react-query'
 import * as React from 'react'
 import type { HydrationStreamProviderProps } from './HydrationStreamProvider'
@@ -15,12 +15,10 @@ const stream = createHydrationStreamProvider<DehydratedState>()
  */
 export function ReactQueryStreamedHydration(props: {
   children: React.ReactNode
-  context?: ContextOptions['context']
+  queryClient?: QueryClient
   transformer?: HydrationStreamProviderProps<DehydratedState>['transformer']
 }) {
-  const queryClient = useQueryClient({
-    context: props.context,
-  })
+  const queryClient = useQueryClient(props.queryClient)
 
   // <server only>
   const isSubscribed = React.useRef(false)
@@ -60,7 +58,7 @@ export function ReactQueryStreamedHydration(props: {
             const shouldDehydrate =
               trackedKeys.has(query.queryHash) &&
               // !passedKeys.has(query.queryHash) &&
-              query.state.status !== 'loading'
+              query.state.status !== 'pending'
 
             // passedKeys.add(query.queryHash);
             return shouldDehydrate

From ed8baa588f884b3fb172442176dc056ab0491cc0 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Mon, 19 Jun 2023 11:05:40 +0200
Subject: [PATCH 16/24] chore: fix build

---
 babel.config.cjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/babel.config.cjs b/babel.config.cjs
index 85c9a6c2bf..62a4cbae45 100644
--- a/babel.config.cjs
+++ b/babel.config.cjs
@@ -38,6 +38,7 @@ module.exports = {
         './packages/react-query/**',
         './packages/react-query-devtools/**',
         './packages/react-query-persist-client/**',
+        './packages/react-query-next-experimental/**',
       ],
       presets: ['@babel/react'],
     },

From 6ebe4f347a05462ef8c32d360fa183a4079b7515 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Mon, 19 Jun 2023 11:18:26 +0200
Subject: [PATCH 17/24] docs: add streaming example

---
 docs/config.json                              |   4 +
 .../nextjs-suspense-streaming/next.config.js  |  17 ++
 .../nextjs-suspense-streaming/package.json    |  24 +++
 .../src/app/api/wait/route.ts                 |  10 +
 .../src/app/layout.tsx                        |  20 ++
 .../src/app/page.tsx                          |  89 ++++++++
 .../src/app/providers.tsx                     |  29 +++
 .../nextjs-suspense-streaming/tsconfig.json   |  25 +++
 pnpm-lock.yaml                                | 200 ++++++++++++++++--
 9 files changed, 395 insertions(+), 23 deletions(-)
 create mode 100644 examples/react/nextjs-suspense-streaming/next.config.js
 create mode 100644 examples/react/nextjs-suspense-streaming/package.json
 create mode 100644 examples/react/nextjs-suspense-streaming/src/app/api/wait/route.ts
 create mode 100644 examples/react/nextjs-suspense-streaming/src/app/layout.tsx
 create mode 100644 examples/react/nextjs-suspense-streaming/src/app/page.tsx
 create mode 100644 examples/react/nextjs-suspense-streaming/src/app/providers.tsx
 create mode 100644 examples/react/nextjs-suspense-streaming/tsconfig.json

diff --git a/docs/config.json b/docs/config.json
index 29e2ac321b..dbe2a967af 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -278,6 +278,10 @@
               "label": "Next.js",
               "to": "react/examples/react/nextjs"
             },
+            {
+              "label": "Next.js app with streaming",
+              "to": "react/examples/react/nextjs-suspense-streaming"
+            },
             {
               "label": "React Native",
               "to": "react/examples/react/react-native"
diff --git a/examples/react/nextjs-suspense-streaming/next.config.js b/examples/react/nextjs-suspense-streaming/next.config.js
new file mode 100644
index 0000000000..9b0c4c0d96
--- /dev/null
+++ b/examples/react/nextjs-suspense-streaming/next.config.js
@@ -0,0 +1,17 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  experimental: {
+    appDir: true,
+    serverActions: true,
+  },
+  webpack: (config) => {
+    if (config.name === 'server') config.optimization.concatenateModules = false
+
+    return config
+  },
+}
+
+module.exports = nextConfig
diff --git a/examples/react/nextjs-suspense-streaming/package.json b/examples/react/nextjs-suspense-streaming/package.json
new file mode 100644
index 0000000000..8592a12c87
--- /dev/null
+++ b/examples/react/nextjs-suspense-streaming/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@tanstack/query-example-nextjs-suspense-streaming",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^v5.0.0-alpha.68",
+    "@tanstack/react-query-devtools": "^v5.0.0-alpha.68",
+    "@tanstack/react-query-next-experimental": "^v5.0.0-alpha.68",
+    "next": "^13.4.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "superjson": "^1.12.3"
+  },
+  "devDependencies": {
+    "@types/node": "20.2.5",
+    "@types/react": "18.2.8",
+    "typescript": "5.1.3"
+  }
+}
diff --git a/examples/react/nextjs-suspense-streaming/src/app/api/wait/route.ts b/examples/react/nextjs-suspense-streaming/src/app/api/wait/route.ts
new file mode 100644
index 0000000000..7fd4825e38
--- /dev/null
+++ b/examples/react/nextjs-suspense-streaming/src/app/api/wait/route.ts
@@ -0,0 +1,10 @@
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const wait = Number(searchParams.get('wait'))
+
+  await new Promise((resolve) => setTimeout(resolve, wait))
+
+  return NextResponse.json(`waited ${wait}ms`)
+}
diff --git a/examples/react/nextjs-suspense-streaming/src/app/layout.tsx b/examples/react/nextjs-suspense-streaming/src/app/layout.tsx
new file mode 100644
index 0000000000..550174f7d9
--- /dev/null
+++ b/examples/react/nextjs-suspense-streaming/src/app/layout.tsx
@@ -0,0 +1,20 @@
+import { Providers } from './providers'
+
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
diff --git a/examples/react/nextjs-suspense-streaming/src/app/page.tsx b/examples/react/nextjs-suspense-streaming/src/app/page.tsx
new file mode 100644
index 0000000000..dfe62c1c42
--- /dev/null
+++ b/examples/react/nextjs-suspense-streaming/src/app/page.tsx
@@ -0,0 +1,89 @@
+'use client'
+import { useQuery } from '@tanstack/react-query'
+import { Suspense } from 'react'
+
+// export const runtime = "edge"; // 'nodejs' (default) | 'edge'
+
+function getBaseURL() {
+  if (typeof window !== 'undefined') {
+    return ''
+  }
+  if (process.env.VERCEL_URL) {
+    return `https://${process.env.VERCEL_URL}`
+  }
+  return 'http://localhost:3000'
+}
+const baseUrl = getBaseURL()
+function useWaitQuery(props: { wait: number }) {
+  const query = useQuery({
+    queryKey: ['wait', props.wait],
+    queryFn: async () => {
+      const path = `/api/wait?wait=${props.wait}`
+      const url = baseUrl + path
+
+      console.log('fetching', url)
+      const res: string = await (
+        await fetch(url, {
+          cache: 'no-store',
+        })
+      ).json()
+      return res
+    },
+    suspense: true,
+  })
+
+  return [query.data as string, query] as const
+}
+
+function MyComponent(props: { wait: number }) {
+  const [data] = useWaitQuery(props)
+
+  return <div>result: {data}</div>
+}
+
+export default function MyPage() {
+  return (
+    <>
+      <Suspense fallback={<div>waiting 100....</div>}>
+        <MyComponent wait={100} />
+      </Suspense>
+      <Suspense fallback={<div>waiting 200....</div>}>
+        <MyComponent wait={200} />
+      </Suspense>
+      <Suspense fallback={<div>waiting 300....</div>}>
+        <MyComponent wait={300} />
+      </Suspense>
+      <Suspense fallback={<div>waiting 400....</div>}>
+        <MyComponent wait={400} />
+      </Suspense>
+      <Suspense fallback={<div>waiting 500....</div>}>
+        <MyComponent wait={500} />
+      </Suspense>
+      <Suspense fallback={<div>waiting 600....</div>}>
+        <MyComponent wait={600} />
+      </Suspense>
+      <Suspense fallback={<div>waiting 700....</div>}>
+        <MyComponent wait={700} />
+      </Suspense>
+
+      <fieldset>
+        <legend>
+          combined <code>Suspense</code>-container
+        </legend>
+        <Suspense
+          fallback={
+            <>
+              <div>waiting 800....</div>
+              <div>waiting 900....</div>
+              <div>waiting 1000....</div>
+            </>
+          }
+        >
+          <MyComponent wait={800} />
+          <MyComponent wait={900} />
+          <MyComponent wait={1000} />
+        </Suspense>
+      </fieldset>
+    </>
+  )
+}
diff --git a/examples/react/nextjs-suspense-streaming/src/app/providers.tsx b/examples/react/nextjs-suspense-streaming/src/app/providers.tsx
new file mode 100644
index 0000000000..407367b3c9
--- /dev/null
+++ b/examples/react/nextjs-suspense-streaming/src/app/providers.tsx
@@ -0,0 +1,29 @@
+// app/providers.jsx
+'use client'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import React from 'react'
+import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
+
+export function Providers(props: { children: React.ReactNode }) {
+  const [queryClient] = React.useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 5 * 1000,
+          },
+        },
+      }),
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryStreamedHydration>
+        {props.children}
+      </ReactQueryStreamedHydration>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}
diff --git a/examples/react/nextjs-suspense-streaming/tsconfig.json b/examples/react/nextjs-suspense-streaming/tsconfig.json
new file mode 100644
index 0000000000..000c3e6782
--- /dev/null
+++ b/examples/react/nextjs-suspense-streaming/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f7c573d4b..7e18ea342b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -453,6 +453,37 @@ importers:
         specifier: ^8.33.1
         version: 8.34.0(react@18.2.0)
 
+  examples/react/next-js-suspense-streaming:
+    dependencies:
+      '@tanstack/react-query':
+        specifier: ^5.0.0-alpha.38
+        version: link:../../../packages/react-query
+      '@tanstack/react-query-devtools':
+        specifier: ^5.0.0-alpha.38
+        version: link:../../../packages/react-query-devtools
+      next:
+        specifier: ^13.4.4
+        version: 13.4.6(@babel/core@7.21.8)(react-dom@18.2.0)(react@18.2.0)
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+      superjson:
+        specifier: ^1.12.3
+        version: 1.12.3
+    devDependencies:
+      '@types/node':
+        specifier: 20.2.5
+        version: 20.2.5
+      '@types/react':
+        specifier: 18.2.8
+        version: 18.2.8
+      typescript:
+        specifier: 5.1.3
+        version: 5.1.3
+
   examples/react/nextjs:
     dependencies:
       '@tanstack/react-query':
@@ -1343,13 +1374,13 @@ importers:
     devDependencies:
       '@typescript-eslint/eslint-plugin':
         specifier: ^5.54.0
-        version: 5.59.7(@typescript-eslint/parser@5.59.7)(eslint@8.34.0)(typescript@5.0.4)
+        version: 5.59.7(@typescript-eslint/parser@5.59.7)(eslint@8.34.0)(typescript@5.1.3)
       '@typescript-eslint/parser':
         specifier: ^5.54.0
-        version: 5.59.7(eslint@8.34.0)(typescript@5.0.4)
+        version: 5.59.7(eslint@8.34.0)(typescript@5.1.3)
       '@typescript-eslint/utils':
         specifier: ^5.54.0
-        version: 5.59.7(eslint@8.34.0)(typescript@5.0.4)
+        version: 5.59.7(eslint@8.34.0)(typescript@5.1.3)
       eslint:
         specifier: ^8.34.0
         version: 8.34.0
@@ -4440,7 +4471,6 @@ packages:
 
   /@next/env@13.4.6:
     resolution: {integrity: sha512-nqUxEtvDqFhmV1/awSg0K2XHNwkftNaiUqCYO9e6+MYmqNObpKVl7OgMkGaQ2SZnFx5YqF0t60ZJTlyJIDAijg==}
-    dev: true
 
   /@next/swc-darwin-arm64@13.4.4:
     resolution: {integrity: sha512-xfjgXvp4KalNUKZMHmsFxr1Ug+aGmmO6NWP0uoh4G3WFqP/mJ1xxfww0gMOeMeSq/Jyr5k7DvoZ2Pv+XOITTtw==}
@@ -4457,7 +4487,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@next/swc-darwin-x64@13.4.4:
@@ -4475,7 +4504,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@next/swc-linux-arm64-gnu@13.4.4:
@@ -4493,7 +4521,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@next/swc-linux-arm64-musl@13.4.4:
@@ -4511,7 +4538,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@next/swc-linux-x64-gnu@13.4.4:
@@ -4529,7 +4555,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@next/swc-linux-x64-musl@13.4.4:
@@ -4547,7 +4572,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@next/swc-win32-arm64-msvc@13.4.4:
@@ -4565,7 +4589,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@next/swc-win32-ia32-msvc@13.4.4:
@@ -4583,7 +4606,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@next/swc-win32-x64-msvc@13.4.4:
@@ -4601,7 +4623,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1:
@@ -5920,6 +5941,10 @@ packages:
   /@types/node@18.13.0:
     resolution: {integrity: sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==}
 
+  /@types/node@20.2.5:
+    resolution: {integrity: sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==}
+    dev: true
+
   /@types/normalize-package-data@2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
@@ -5944,19 +5969,19 @@ packages:
   /@types/react-is@18.2.0:
     resolution: {integrity: sha512-1vz2yObaQkLL7YFe/pme2cpvDsCwI1WXIfL+5eLz0MI9gFG24Re16RzUsI8t9XZn9ZWvgLNDrJBmrqXJO7GNQQ==}
     dependencies:
-      '@types/react': 18.2.7
+      '@types/react': 18.2.8
     dev: false
 
   /@types/react-native@0.71.0:
     resolution: {integrity: sha512-4MAoseGM8zv5PKQyc2SvKldvOmCJX4mNqj+mDqh0J9yJMzWQnGenk2vQCi+jxMXa3xWYIgx+ewaCSw0XiiGGSw==}
     dependencies:
-      '@types/react': 18.2.7
+      '@types/react': 18.2.8
     dev: true
 
   /@types/react-transition-group@4.4.6:
     resolution: {integrity: sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==}
     dependencies:
-      '@types/react': 18.2.7
+      '@types/react': 18.2.8
     dev: false
 
   /@types/react@18.2.7:
@@ -5966,6 +5991,13 @@ packages:
       '@types/scheduler': 0.16.2
       csstype: 3.1.2
 
+  /@types/react@18.2.8:
+    resolution: {integrity: sha512-lTyWUNrd8ntVkqycEEplasWy2OxNlShj3zqS0LuB1ENUGis5HodmhM7DtCoUGbxj3VW/WsGA0DUhpG6XrM7gPA==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.2
+      csstype: 3.1.2
+
   /@types/resolve@1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
@@ -6053,6 +6085,34 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/eslint-plugin@5.59.7(@typescript-eslint/parser@5.59.7)(eslint@8.34.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-BL+jYxUFIbuYwy+4fF86k5vdT9lT0CNJ6HtwrIvGh0PhH8s0yy5rjaKH2fDCrz5ITHy07WCzVGNvAmjJh4IJFA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^5.0.0
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@eslint-community/regexpp': 4.5.1
+      '@typescript-eslint/parser': 5.59.7(eslint@8.34.0)(typescript@5.1.3)
+      '@typescript-eslint/scope-manager': 5.59.7
+      '@typescript-eslint/type-utils': 5.59.7(eslint@8.34.0)(typescript@5.1.3)
+      '@typescript-eslint/utils': 5.59.7(eslint@8.34.0)(typescript@5.1.3)
+      debug: 4.3.4
+      eslint: 8.34.0
+      grapheme-splitter: 1.0.4
+      ignore: 5.2.0
+      natural-compare-lite: 1.4.0
+      semver: 7.5.1
+      tsutils: 3.21.0(typescript@5.1.3)
+      typescript: 5.1.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/parser@5.59.7(eslint@8.34.0)(typescript@5.0.4):
     resolution: {integrity: sha512-VhpsIEuq/8i5SF+mPg9jSdIwgMBBp0z9XqjiEay+81PYLJuroN+ET1hM5IhkiYMJd9MkTz8iJLt7aaGAgzWUbQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6073,6 +6133,26 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/parser@5.59.7(eslint@8.34.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-VhpsIEuq/8i5SF+mPg9jSdIwgMBBp0z9XqjiEay+81PYLJuroN+ET1hM5IhkiYMJd9MkTz8iJLt7aaGAgzWUbQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 5.59.7
+      '@typescript-eslint/types': 5.59.7
+      '@typescript-eslint/typescript-estree': 5.59.7(typescript@5.1.3)
+      debug: 4.3.4
+      eslint: 8.34.0
+      typescript: 5.1.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/scope-manager@5.59.7:
     resolution: {integrity: sha512-FL6hkYWK9zBGdxT2wWEd2W8ocXMu3K94i3gvMrjXpx+koFYdYV7KprKfirpgY34vTGzEPPuKoERpP8kD5h7vZQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6101,6 +6181,26 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/type-utils@5.59.7(eslint@8.34.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-ozuz/GILuYG7osdY5O5yg0QxXUAEoI4Go3Do5xeu+ERH9PorHBPSdvD3Tjp2NN2bNLh1NJQSsQu2TPu/Ly+HaQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/typescript-estree': 5.59.7(typescript@5.1.3)
+      '@typescript-eslint/utils': 5.59.7(eslint@8.34.0)(typescript@5.1.3)
+      debug: 4.3.4
+      eslint: 8.34.0
+      tsutils: 3.21.0(typescript@5.1.3)
+      typescript: 5.1.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/types@5.59.7:
     resolution: {integrity: sha512-UnVS2MRRg6p7xOSATscWkKjlf/NDKuqo5TdbWck6rIRZbmKpVNTLALzNvcjIfHBE7736kZOFc/4Z3VcZwuOM/A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6127,6 +6227,27 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/typescript-estree@5.59.7(typescript@5.1.3):
+    resolution: {integrity: sha512-4A1NtZ1I3wMN2UGDkU9HMBL+TIQfbrh4uS0WDMMpf3xMRursDbqEf1ahh6vAAe3mObt8k3ZATnezwG4pdtWuUQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 5.59.7
+      '@typescript-eslint/visitor-keys': 5.59.7
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.5.1
+      tsutils: 3.21.0(typescript@5.1.3)
+      typescript: 5.1.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/utils@5.59.7(eslint@8.34.0)(typescript@5.0.4):
     resolution: {integrity: sha512-yCX9WpdQKaLufz5luG4aJbOpdXf/fjwGMcLFXZVPUz3QqLirG5QcwwnIHNf8cjLjxK4qtzTO8udUtMQSAToQnQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6147,6 +6268,26 @@ packages:
       - typescript
     dev: true
 
+  /@typescript-eslint/utils@5.59.7(eslint@8.34.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-yCX9WpdQKaLufz5luG4aJbOpdXf/fjwGMcLFXZVPUz3QqLirG5QcwwnIHNf8cjLjxK4qtzTO8udUtMQSAToQnQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.34.0)
+      '@types/json-schema': 7.0.11
+      '@types/semver': 7.5.0
+      '@typescript-eslint/scope-manager': 5.59.7
+      '@typescript-eslint/types': 5.59.7
+      '@typescript-eslint/typescript-estree': 5.59.7(typescript@5.1.3)
+      eslint: 8.34.0
+      eslint-scope: 5.1.1
+      semver: 7.5.1
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
   /@typescript-eslint/visitor-keys@5.59.7:
     resolution: {integrity: sha512-tyN+X2jvMslUszIiYbF0ZleP+RqQsFVpGrKI6e0Eet1w8WmhsAtmzaqm8oM8WJQ1ysLwhnsK/4hYHJjOgJVfQQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -9960,7 +10101,6 @@ packages:
 
   /glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
-    dev: true
 
   /glob@10.2.6:
     resolution: {integrity: sha512-U/rnDpXJGF414QQQZv5uVsabTVxMSwzS5CH0p3DRCIV6ownl4f7PzGnkGmvlum2wB+9RlJWJZ6ACU1INnBqiPA==}
@@ -12861,7 +13001,6 @@ packages:
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
-    dev: true
 
   /nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
@@ -15713,8 +15852,8 @@ packages:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: 3.55.0
-      svelte-preprocess: 5.0.4(@babel/core@7.21.8)(postcss@8.4.23)(svelte@3.55.0)(typescript@5.0.4)
-      typescript: 5.0.4
+      svelte-preprocess: 5.0.4(@babel/core@7.21.8)(postcss@8.4.23)(svelte@3.55.0)(typescript@5.1.3)
+      typescript: 5.1.3
     transitivePeerDependencies:
       - '@babel/core'
       - coffeescript
@@ -15751,7 +15890,7 @@ packages:
       svelte: 3.55.0
     dev: true
 
-  /svelte-preprocess@5.0.4(@babel/core@7.21.8)(postcss@8.4.23)(svelte@3.55.0)(typescript@5.0.4):
+  /svelte-preprocess@5.0.4(@babel/core@7.21.8)(postcss@8.4.23)(svelte@3.55.0)(typescript@5.1.3):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -15797,7 +15936,7 @@ packages:
       sorcery: 0.11.0
       strip-indent: 3.0.0
       svelte: 3.55.0
-      typescript: 5.0.4
+      typescript: 5.1.3
     dev: true
 
   /svelte2tsx@0.6.0(svelte@3.55.0)(typescript@5.0.4):
@@ -16213,6 +16352,16 @@ packages:
       typescript: 5.0.4
     dev: true
 
+  /tsutils@3.21.0(typescript@5.1.3):
+    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
+    engines: {node: '>= 6'}
+    peerDependencies:
+      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
+    dependencies:
+      tslib: 1.14.1
+      typescript: 5.1.3
+    dev: true
+
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -16306,6 +16455,12 @@ packages:
     hasBin: true
     dev: true
 
+  /typescript@5.1.3:
+    resolution: {integrity: sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: true
+
   /ua-parser-js@0.7.31:
     resolution: {integrity: sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==}
     dev: false
@@ -16790,7 +16945,6 @@ packages:
     dependencies:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.10
-    dev: true
 
   /wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}

From 595c732d8ee79bc984595ea944ce90982b9e8ce4 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Mon, 19 Jun 2023 11:22:56 +0200
Subject: [PATCH 18/24] chore: fix outdated lockfile

---
 .../nextjs-suspense-streaming/package.json    |  1 -
 pnpm-lock.yaml                                | 62 +++++++++----------
 2 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/examples/react/nextjs-suspense-streaming/package.json b/examples/react/nextjs-suspense-streaming/package.json
index 8592a12c87..187491930f 100644
--- a/examples/react/nextjs-suspense-streaming/package.json
+++ b/examples/react/nextjs-suspense-streaming/package.json
@@ -10,7 +10,6 @@
   "dependencies": {
     "@tanstack/react-query": "^v5.0.0-alpha.68",
     "@tanstack/react-query-devtools": "^v5.0.0-alpha.68",
-    "@tanstack/react-query-next-experimental": "^v5.0.0-alpha.68",
     "next": "^13.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7e18ea342b..de18f3e101 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -453,37 +453,6 @@ importers:
         specifier: ^8.33.1
         version: 8.34.0(react@18.2.0)
 
-  examples/react/next-js-suspense-streaming:
-    dependencies:
-      '@tanstack/react-query':
-        specifier: ^5.0.0-alpha.38
-        version: link:../../../packages/react-query
-      '@tanstack/react-query-devtools':
-        specifier: ^5.0.0-alpha.38
-        version: link:../../../packages/react-query-devtools
-      next:
-        specifier: ^13.4.4
-        version: 13.4.6(@babel/core@7.21.8)(react-dom@18.2.0)(react@18.2.0)
-      react:
-        specifier: ^18.2.0
-        version: 18.2.0
-      react-dom:
-        specifier: ^18.2.0
-        version: 18.2.0(react@18.2.0)
-      superjson:
-        specifier: ^1.12.3
-        version: 1.12.3
-    devDependencies:
-      '@types/node':
-        specifier: 20.2.5
-        version: 20.2.5
-      '@types/react':
-        specifier: 18.2.8
-        version: 18.2.8
-      typescript:
-        specifier: 5.1.3
-        version: 5.1.3
-
   examples/react/nextjs:
     dependencies:
       '@tanstack/react-query':
@@ -514,6 +483,37 @@ importers:
         specifier: ^3.0.3
         version: 3.2.1
 
+  examples/react/nextjs-suspense-streaming:
+    dependencies:
+      '@tanstack/react-query':
+        specifier: ^v5.0.0-alpha.68
+        version: link:../../../packages/react-query
+      '@tanstack/react-query-devtools':
+        specifier: ^v5.0.0-alpha.68
+        version: link:../../../packages/react-query-devtools
+      next:
+        specifier: ^13.4.4
+        version: 13.4.6(@babel/core@7.21.8)(react-dom@18.2.0)(react@18.2.0)
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+      superjson:
+        specifier: ^1.12.3
+        version: 1.12.3
+    devDependencies:
+      '@types/node':
+        specifier: 20.2.5
+        version: 20.2.5
+      '@types/react':
+        specifier: 18.2.8
+        version: 18.2.8
+      typescript:
+        specifier: 5.1.3
+        version: 5.1.3
+
   examples/react/offline:
     dependencies:
       '@tanstack/query-sync-storage-persister':

From bd750873f42a0d257e9e0ae56caa971ea3de14fe Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Mon, 19 Jun 2023 11:29:24 +0200
Subject: [PATCH 19/24] chore: fix prettier

---
 examples/react/nextjs-suspense-streaming/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/react/nextjs-suspense-streaming/tsconfig.json b/examples/react/nextjs-suspense-streaming/tsconfig.json
index 000c3e6782..6ef5cd577f 100644
--- a/examples/react/nextjs-suspense-streaming/tsconfig.json
+++ b/examples/react/nextjs-suspense-streaming/tsconfig.json
@@ -18,7 +18,7 @@
       {
         "name": "next"
       }
-    ],
+    ]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]

From 4ef87c15c28cdd2323560bc44ea8764c6b1487c9 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sun, 25 Jun 2023 19:12:23 +0200
Subject: [PATCH 20/24] refactor: remove isSubscribed ref

---
 .../src/ReactQueryStreamedHydration.tsx                        | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
index e17b9d954a..24fcdb3fa2 100644
--- a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
+++ b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
@@ -21,7 +21,6 @@ export function ReactQueryStreamedHydration(props: {
   const queryClient = useQueryClient(props.queryClient)
 
   // <server only>
-  const isSubscribed = React.useRef(false)
   /**
    * We need to track which queries were added/updated during the render
    */
@@ -33,7 +32,7 @@ export function ReactQueryStreamedHydration(props: {
 
   const cache = queryClient.getQueryCache()
 
-  if (typeof window === 'undefined' && !isSubscribed.current) {
+  if (typeof window === 'undefined') {
     // Do we need to care about unsubscribing? I don't think so to be honest
     cache.subscribe((event) => {
       switch (event.type) {

From ba57ad844c9af79e57b131d56476b4a4390da930 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sun, 25 Jun 2023 19:14:53 +0200
Subject: [PATCH 21/24] refactor: re-arrange comment

---
 .../src/ReactQueryStreamedHydration.tsx                | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
index 24fcdb3fa2..cafdbec702 100644
--- a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
+++ b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
@@ -20,21 +20,15 @@ export function ReactQueryStreamedHydration(props: {
 }) {
   const queryClient = useQueryClient(props.queryClient)
 
-  // <server only>
   /**
    * We need to track which queries were added/updated during the render
    */
   const [trackedKeys] = React.useState(() => new Set<string>())
-  /**
-   * Track which queries were already passed to the client so we don't pass them again
-   */
-  // const [passedKeys] = useState(() => new Set<string>());
-
-  const cache = queryClient.getQueryCache()
 
+  // <server only>
   if (typeof window === 'undefined') {
     // Do we need to care about unsubscribing? I don't think so to be honest
-    cache.subscribe((event) => {
+    queryClient.getQueryCache().subscribe((event) => {
       switch (event.type) {
         case 'added':
         case 'updated':

From acf0da6f0d536838d0fbc9b82df44b799778ed7f Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Sun, 25 Jun 2023 19:38:46 +0200
Subject: [PATCH 22/24] chore: remove comments

---
 .../src/ReactQueryStreamedHydration.tsx                    | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
index cafdbec702..d8f0361229 100644
--- a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
+++ b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
@@ -48,13 +48,10 @@ export function ReactQueryStreamedHydration(props: {
          */
         const dehydratedState = dehydrate(queryClient, {
           shouldDehydrateQuery(query) {
-            const shouldDehydrate =
+            return (
               trackedKeys.has(query.queryHash) &&
-              // !passedKeys.has(query.queryHash) &&
               query.state.status !== 'pending'
-
-            // passedKeys.add(query.queryHash);
-            return shouldDehydrate
+            )
           },
         })
         trackedKeys.clear()

From 63c2891a0e1a005895f1548374618b40c856871b Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Tue, 27 Jun 2023 11:46:35 +0200
Subject: [PATCH 23/24] chore: fix broken lock file

---
 pnpm-lock.yaml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef4baf7f03..68b7101286 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3474,7 +3474,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.13.9
-    dev: true
 
   /@babel/runtime@7.21.0:
     resolution: {integrity: sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==}
@@ -13576,7 +13575,7 @@ packages:
       '@next/env': 13.4.6
       '@swc/helpers': 0.5.1
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001507
+      caniuse-lite: 1.0.30001508
       postcss: 8.4.14
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)

From 9d67d8bfe660ed9a752195202637109b19035726 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Tue, 27 Jun 2023 15:13:42 +0200
Subject: [PATCH 24/24] feat: allow customization of hydrate / dehydrate
 options

and make sure we fall back to the defaultShouldDehydrate function, which only dehydrates successful queries
---
 .../src/ReactQueryStreamedHydration.tsx       | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
index d8f0361229..a3b69bbb9b 100644
--- a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
+++ b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx
@@ -1,7 +1,17 @@
 'use client'
 
-import type { DehydratedState, QueryClient } from '@tanstack/react-query'
-import { dehydrate, hydrate, useQueryClient } from '@tanstack/react-query'
+import type {
+  DehydratedState,
+  DehydrateOptions,
+  HydrateOptions,
+  QueryClient,
+} from '@tanstack/react-query'
+import {
+  defaultShouldDehydrateQuery,
+  dehydrate,
+  hydrate,
+  useQueryClient,
+} from '@tanstack/react-query'
 import * as React from 'react'
 import type { HydrationStreamProviderProps } from './HydrationStreamProvider'
 import { createHydrationStreamProvider } from './HydrationStreamProvider'
@@ -16,6 +26,10 @@ const stream = createHydrationStreamProvider<DehydratedState>()
 export function ReactQueryStreamedHydration(props: {
   children: React.ReactNode
   queryClient?: QueryClient
+  options?: {
+    hydrate?: HydrateOptions
+    dehydrate?: DehydrateOptions
+  }
   transformer?: HydrationStreamProviderProps<DehydratedState>['transformer']
 }) {
   const queryClient = useQueryClient(props.queryClient)
@@ -46,12 +60,14 @@ export function ReactQueryStreamedHydration(props: {
         /**
          * Dehydrated state of the client where we only include the queries that were added/updated since the last flush
          */
+        const shouldDehydrate =
+          props.options?.dehydrate?.shouldDehydrateQuery ??
+          defaultShouldDehydrateQuery
+
         const dehydratedState = dehydrate(queryClient, {
+          ...props.options?.dehydrate,
           shouldDehydrateQuery(query) {
-            return (
-              trackedKeys.has(query.queryHash) &&
-              query.state.status !== 'pending'
-            )
+            return trackedKeys.has(query.queryHash) && shouldDehydrate(query)
           },
         })
         trackedKeys.clear()
@@ -65,7 +81,7 @@ export function ReactQueryStreamedHydration(props: {
       // Happens in browser:
       onEntries={(entries) => {
         for (const hydratedState of entries) {
-          hydrate(queryClient, hydratedState)
+          hydrate(queryClient, hydratedState, props.options?.hydrate)
         }
       }}
       // Handle BigInts etc using superjson