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

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