Search…

Auto

StartRC

Router

Query

Docs

Partners

React React

Latest

Search…

latest

React React

Latest

React Example: Nextjs Suspense Streaming

Github StackBlitz CodeSandbox

Code ExplorerCode

Interactive SandboxSandbox

src
- app
  - api
  - layout.tsx
  - page.tsx
  - providers.tsx
.gitignore
next.config.js
package.json
tsconfig.json

tsx

    'use client'
    import { isServer, useSuspenseQuery } from '@tanstack/react-query'
    import { Suspense } from 'react'

    export const runtime = 'edge' // 'nodejs' (default) | 'edge'

    function getBaseURL() {
      if (!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 as string, query] as const
    }

    function MyComponent(props: { wait: number }) {
      const [data] = useWaitQuery(props)

      return <div>result: {data}</div>
    }

    export default function MyPage() {
      return (
        <>

          <fieldset>
            <legend>
              combined <code>Suspense</code>-container
            </legend>
                  <div>waiting 800....</div>
                  <div>waiting 900....</div>
                  <div>waiting 1000....</div>
                </>
              }
            >
          </fieldset>
        </>
      )
    }

[Want to Skip the Docs?

“If you’re serious about really understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg?s=tanstack)