From 638b09e8e7b2d39476800d9bf70a9416c78d64b3 Mon Sep 17 00:00:00 2001
From: Sebastian Lackner <lackner@codefy.de>
Date: Wed, 19 Mar 2025 03:07:59 +0100
Subject: [PATCH] testcase for useSuspenseQuery

---
 .../suspense/src/components/ComponentA.tsx    | 14 ++++++
 .../suspense/src/components/ComponentB.tsx    | 13 ++++++
 .../react/suspense/src/components/Project.tsx | 36 ----------------
 .../suspense/src/components/Projects.tsx      | 40 -----------------
 examples/react/suspense/src/index.tsx         | 43 ++++---------------
 examples/react/suspense/src/queries.ts        | 23 ----------
 6 files changed, 36 insertions(+), 133 deletions(-)
 create mode 100644 examples/react/suspense/src/components/ComponentA.tsx
 create mode 100644 examples/react/suspense/src/components/ComponentB.tsx
 delete mode 100644 examples/react/suspense/src/components/Project.tsx
 delete mode 100644 examples/react/suspense/src/components/Projects.tsx
 delete mode 100644 examples/react/suspense/src/queries.ts

diff --git a/examples/react/suspense/src/components/ComponentA.tsx b/examples/react/suspense/src/components/ComponentA.tsx
new file mode 100644
index 0000000000..a54541295f
--- /dev/null
+++ b/examples/react/suspense/src/components/ComponentA.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+export default function ComponentA({}: {}) {
+  useQuery({
+    queryKey: ['key'],
+    queryFn: () => { console.log("fetch"); throw "some error" },
+    throwOnError: false,
+  })
+
+  return (
+    <>Component A</>
+  )
+}
diff --git a/examples/react/suspense/src/components/ComponentB.tsx b/examples/react/suspense/src/components/ComponentB.tsx
new file mode 100644
index 0000000000..0be98533f8
--- /dev/null
+++ b/examples/react/suspense/src/components/ComponentB.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { useSuspenseQuery } from '@tanstack/react-query'
+
+export default function ComponentB({}: {}) {
+  useSuspenseQuery({
+    queryKey: ['key'],
+    queryFn: () => { console.log("fetch"); throw "some error" },
+  })
+
+  return (
+    <>Component A</>
+  )
+}
diff --git a/examples/react/suspense/src/components/Project.tsx b/examples/react/suspense/src/components/Project.tsx
deleted file mode 100644
index 84ca4e454d..0000000000
--- a/examples/react/suspense/src/components/Project.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-import { useSuspenseQuery } from '@tanstack/react-query'
-import { fetchProject } from '../queries'
-import Button from './Button'
-import Spinner from './Spinner'
-
-export default function Project({
-  activeProject,
-  setActiveProject,
-}: {
-  activeProject: string
-  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>
-}) {
-  const { data, isFetching } = useSuspenseQuery({
-    queryKey: ['project', activeProject],
-    queryFn: () => fetchProject(activeProject),
-  })
-
-  return (
-    <div>
-      <Button onClick={() => setActiveProject(null)}>Back</Button>
-      <h1>
-        {activeProject} {isFetching ? <Spinner /> : null}
-      </h1>
-      {data ? (
-        <div>
-          <p>forks: {data.forks_count}</p>
-          <p>stars: {data.stargazers_count}</p>
-          <p>watchers: {data.watchers_count}</p>
-        </div>
-      ) : null}
-      <br />
-      <br />
-    </div>
-  )
-}
diff --git a/examples/react/suspense/src/components/Projects.tsx b/examples/react/suspense/src/components/Projects.tsx
deleted file mode 100644
index f1307692a9..0000000000
--- a/examples/react/suspense/src/components/Projects.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
-import { fetchProject, fetchProjects } from '../queries'
-import Button from './Button'
-import Spinner from './Spinner'
-
-export default function Projects({
-  setActiveProject,
-}: {
-  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>
-}) {
-  const queryClient = useQueryClient()
-  const { data, isFetching } = useSuspenseQuery({
-    queryKey: ['projects'],
-    queryFn: fetchProjects,
-  })
-
-  return (
-    <div>
-      <h1>TanStack Repositories {isFetching ? <Spinner /> : null}</h1>
-      {data.map((project) => (
-        <p key={project.full_name}>
-          <Button
-            onClick={() => {
-              // Prefetch the project query
-              queryClient.prefetchQuery({
-                queryKey: ['project', project.full_name],
-                queryFn: () => fetchProject(project.full_name),
-              })
-              setActiveProject(project.full_name)
-            }}
-          >
-            Load
-          </Button>{' '}
-          {project.name}
-        </p>
-      ))}
-    </div>
-  )
-}
diff --git a/examples/react/suspense/src/index.tsx b/examples/react/suspense/src/index.tsx
index 814718dd78..39be97d1d7 100755
--- a/examples/react/suspense/src/index.tsx
+++ b/examples/react/suspense/src/index.tsx
@@ -10,12 +10,9 @@ import {
 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'))
+import ComponentA from './components/ComponentA'
+import ComponentB from './components/ComponentB'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -35,26 +32,14 @@ function App() {
 
 function Example() {
   const queryClient = useQueryClient()
-  const [showProjects, setShowProjects] = React.useState(false)
-  const [activeProject, setActiveProject] = React.useState<string | null>(null)
+  const [status, setStatus] = React.useState<number>(0);
 
   return (
     <>
-      <Button
-        onClick={() => {
-          setShowProjects((old) => {
-            if (!old) {
-              queryClient.prefetchQuery({
-                queryKey: ['projects'],
-                queryFn: fetchProjects,
-              })
-            }
-            return !old
-          })
-        }}
-      >
-        {showProjects ? 'Hide Projects' : 'Show Projects'}
-      </Button>
+      Which component should be mounted?
+      <Button onClick={() => setStatus(0)}>None</Button>
+      <Button onClick={() => setStatus(1)}>Query</Button>
+      <Button onClick={() => setStatus(2)}>SuspenseQuery</Button>
 
       <hr />
 
@@ -70,18 +55,8 @@ function Example() {
             )}
             onReset={reset}
           >
-            <React.Suspense fallback={<h1>Loading projects...</h1>}>
-              {showProjects ? (
-                activeProject ? (
-                  <Project
-                    activeProject={activeProject}
-                    setActiveProject={setActiveProject}
-                  />
-                ) : (
-                  <Projects setActiveProject={setActiveProject} />
-                )
-              ) : null}
-            </React.Suspense>
+            {status === 1 ? <ComponentA /> : null}
+            {status === 2 ? <ComponentB /> : null}
           </ErrorBoundary>
         )}
       </QueryErrorResetBoundary>
diff --git a/examples/react/suspense/src/queries.ts b/examples/react/suspense/src/queries.ts
deleted file mode 100644
index 3ff7da1ce0..0000000000
--- a/examples/react/suspense/src/queries.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export async function fetchProjects(): Promise<
-  Array<{ name: string; full_name: string }>
-> {
-  console.info('Fetching projects')
-
-  const response = await fetch(
-    `https://api.github.com/users/TanStack/repos?sort=updated`,
-  )
-  await new Promise((r) => setTimeout(r, 1000))
-  return await response.json()
-}
-
-export async function fetchProject(id: string): Promise<{
-  forks_count: number
-  stargazers_count: number
-  watchers_count: number
-}> {
-  console.info('Fetching project:', id)
-
-  const response = await fetch(`https://api.github.com/repos/${id}`)
-  await new Promise((r) => setTimeout(r, 1000))
-  return await response.json()
-}