Search…

Auto

StartRC

Router

Query

Docs

Partners

React React

Latest

Search…

latest

React React

Latest

React Example: Suspense

Github StackBlitz CodeSandbox

Code ExplorerCode

Interactive SandboxSandbox

public
src
- components
- index.tsx
- queries.ts
.eslintrc
.gitignore
README.md
index.html
package.json
tsconfig.json
vite.config.ts

tsx

    import 'font-awesome/css/font-awesome.min.css'
    import React, { lazy } from 'react'
    import ReactDOM from 'react-dom/client'
    import {
      QueryClient,
      QueryClientProvider,
      QueryErrorResetBoundary,
      useQueryClient,
    } from '@tanstack/react-query'
    import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
    import { ErrorBoundary } from 'react-error-boundary'

    import { fetchProjects } from './queries'

    import Button from './components/Button'

    const Projects = lazy(() => import('./components/Projects'))
    const Project = lazy(() => import('./components/Project'))

    const queryClient = new QueryClient({
      defaultOptions: {
        queries: {
          retry: 0,
        },
      },
    })

    function App() {
      return (
      )
    }

    function Example() {
      const queryClient = useQueryClient()
      const [showProjects, setShowProjects] = React.useState(false)
      const [activeProject, setActiveProject] = React.useState<string | null>(null)

      return (
        <>
            {showProjects ? 'Hide Projects' : 'Show Projects'}

          <hr />

            {({ reset }) => (
                    There was an error!{' '}
                    <pre style={{ whiteSpace: 'normal' }}>{error.message}</pre>
                )}
                onReset={reset}
              >
                {showProjects ? (
                    {activeProject ? (
                    ) : (
                    )}
                  </React.Suspense>
                ) : null}
            )}
        </>
      )
    }

    const rootElement = document.getElementById('root') as HTMLElement
    ReactDOM.createRoot(rootElement).render(<App />)

[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)