snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)

examples/react/nextjs-suspense-streaming/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

examples/react/nextjs-suspense-streaming/next.config.js

@@ -0,0 +1,15 @@
+// @ts-check
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  webpack: (config) => {
+    if (config.name === 'server') config.optimization.concatenateModules = false
+
+    return config
+  },
+}
+
+export default nextConfig

examples/react/nextjs-suspense-streaming/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@tanstack/query-example-nextjs-suspense-streaming",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --webpack",
+    "build": "next build --webpack",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.102.8",
+    "@tanstack/react-query-devtools": "^5.102.8",
+    "@tanstack/react-query-next-experimental": "^5.102.8",
+    "next": "^16.0.7",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "5.8.3"
+  }
+}

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`)
+}

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>
+  )
+}

examples/react/nextjs-suspense-streaming/src/app/page.tsx

@@ -0,0 +1,87 @@
+'use client'
+import { environmentManager, useSuspenseQuery } from '@tanstack/react-query'
+import { Suspense } from 'react'
+
+export const runtime = 'edge' // 'nodejs' (default) | 'edge'
+
+function getBaseURL() {
+  if (!environmentManager.isServer()) {
+    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 = useSuspenseQuery({
+    queryKey: ['wait', props.wait],
+    queryFn: async () => {
+      const path = `/api/wait?wait=${props.wait}`
+      const url = baseUrl + path
+
+      const res: string = await (
+        await fetch(url, {
+          cache: 'no-store',
+        })
+      ).json()
+      return res
+    },
+  })
+
+  return [query.data, 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>
+    </>
+  )
+}

examples/react/nextjs-suspense-streaming/src/app/providers.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import {
+  QueryClient,
+  QueryClientProvider,
+  environmentManager,
+} from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import * as React from 'react'
+import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+      },
+    },
+  })
+}
+
+let browserQueryClient: QueryClient | undefined = undefined
+
+function getQueryClient() {
+  if (environmentManager.isServer()) {
+    return makeQueryClient()
+  } else {
+    if (!browserQueryClient) browserQueryClient = makeQueryClient()
+    return browserQueryClient
+  }
+}
+
+export function Providers(props: { children: React.ReactNode }) {
+  const queryClient = getQueryClient()
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryStreamedHydration>
+        {props.children}
+      </ReactQueryStreamedHydration>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}

examples/react/nextjs-suspense-streaming/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}