React Example: Suspense

Github StackBlitz CodeSandbox

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 ( <QueryClientProvider client={queryClient}> <Example /> </QueryClientProvider> ) } function Example() { const queryClient = useQueryClient() const [showProjects, setShowProjects] = React.useState(false) const [activeProject, setActiveProject] = React.useState<string | null>(null) return ( <> <Button onClick={() => { setShowProjects((old) => { if (!old) { queryClient.prefetchQuery({ queryKey: ['projects'], queryFn: fetchProjects, }) } return !old }) }} > {showProjects ? 'Hide Projects' : 'Show Projects'} </Button> <hr /> <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) => ( <div> There was an error!{' '} <Button onClick={() => resetErrorBoundary()}>Try again</Button> <pre style={{ whiteSpace: 'normal' }}>{error.message}</pre> </div> )} onReset={reset} > {showProjects ? ( <React.Suspense fallback={<h1>Loading projects...</h1>}> {activeProject ? ( <Project activeProject={activeProject} setActiveProject={setActiveProject} /> ) : ( <Projects setActiveProject={setActiveProject} /> )} </React.Suspense> ) : null} </ErrorBoundary> )} </QueryErrorResetBoundary> <ReactQueryDevtools initialIsOpen /> </> ) } const rootElement = document.getElementById('root') as HTMLElement ReactDOM.createRoot(rootElement).render(<App />) 

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 ( <QueryClientProvider client={queryClient}> <Example /> </QueryClientProvider> ) } function Example() { const queryClient = useQueryClient() const [showProjects, setShowProjects] = React.useState(false) const [activeProject, setActiveProject] = React.useState<string | null>(null) return ( <> <Button onClick={() => { setShowProjects((old) => { if (!old) { queryClient.prefetchQuery({ queryKey: ['projects'], queryFn: fetchProjects, }) } return !old }) }} > {showProjects ? 'Hide Projects' : 'Show Projects'} </Button> <hr /> <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) => ( <div> There was an error!{' '} <Button onClick={() => resetErrorBoundary()}>Try again</Button> <pre style={{ whiteSpace: 'normal' }}>{error.message}</pre> </div> )} onReset={reset} > {showProjects ? ( <React.Suspense fallback={<h1>Loading projects...</h1>}> {activeProject ? ( <Project activeProject={activeProject} setActiveProject={setActiveProject} /> ) : ( <Projects setActiveProject={setActiveProject} /> )} </React.Suspense> ) : null} </ErrorBoundary> )} </QueryErrorResetBoundary> <ReactQueryDevtools initialIsOpen /> </> ) } const rootElement = document.getElementById('root') as HTMLElement ReactDOM.createRoot(rootElement).render(<App />)