chore: update

examples/visualization/src/app/layout.tsx

@@ -25,21 +25,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             <li>
               <details>
                 <summary>@suspensive/react</summary>
-                <li>
-                  <Link href="/react/Suspense/clientOnly">{`<Suspense clientOnly/>`}</Link>
-                </li>
-                <li>
-                  <Link href="/react/DevMode">{`<DevMode/>`}</Link>
-                </li>
                 <li>
                   <Link href="/react/Delay">{`<Delay/>`}</Link>
                 </li>
                 <li>
                   <Link href="/react/ErrorBoundary/shouldCatch">{`<ErrorBoundary/>`} shouldCatch prop</Link>
                 </li>
-                <li>
-                  <Link href="/react/SuspensiveError">SuspensiveError (internal api)</Link>
-                </li>
                 <li>
                   <Link href="/react/zodSearchParams">zod: no param</Link>
                 </li>

examples/visualization/src/app/react-query/SuspenseQuery/page.tsx

@@ -1,46 +1,50 @@
 'use client'
 
 import { ErrorBoundary, Suspense } from '@suspensive/react'
-import { SuspenseQuery } from '@suspensive/react-query'
+import { SuspenseQuery, queryOptions, usePrefetchQuery } from '@suspensive/react-query'
 import axios from 'axios'
 import { Spinner } from '~/components/uis'
 
+const query = {
+  user: (userId: number) =>
+    queryOptions({
+      queryKey: ['users', userId],
+      queryFn: () =>
+        axios
+          .get<{
+            id: number
+            username: string
+            age: number
+          }>(`https://dummyjson.com/users/${userId}`)
+          .then(({ data }) => data),
+    }),
+  products: () =>
+    queryOptions({
+      queryKey: ['products'],
+      queryFn: () =>
+        axios
+          .get<{
+            products: Array<{
+              id: number
+              title: string
+              price: number
+            }>
+          }>(`https://dummyjson.com/products`)
+          .then(({ data }) => data),
+    }),
+}
+
 export default function Page() {
   const userId = 1
+  usePrefetchQuery(query.user(userId))
+  usePrefetchQuery(query.products())
 
   return (
     <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
-      <Suspense clientOnly fallback={<Spinner />}>
+      <Suspense clientOnly fallback={<ExpensiveSpinner ms={2000} />}>
         <div>
-          <SuspenseQuery
-            queryKey={['users', userId]}
-            queryFn={() =>
-              axios
-                .get<{
-                  id: number
-                  username: string
-                  age: number
-                }>(`https://dummyjson.com/users/${userId}`)
-                .then(({ data }) => data)
-            }
-          >
-            {({ data: user }) => <h1>{user.username}</h1>}
-          </SuspenseQuery>
-          <SuspenseQuery
-            queryKey={['products']}
-            queryFn={() =>
-              axios
-                .get<{
-                  products: Array<{
-                    id: number
-                    title: string
-                    price: number
-                  }>
-                }>(`https://dummyjson.com/products`)
-                .then(({ data }) => data)
-            }
-            select={(data) => data.products}
-          >
+          <SuspenseQuery {...query.user(userId)}>{({ data: user }) => <h1>{user.username}</h1>}</SuspenseQuery>
+          <SuspenseQuery {...query.products()} select={(data) => data.products}>
             {({ data: products }) => (
               <div>
                 {products.map((product) => (
@@ -54,3 +58,11 @@ export default function Page() {
     </ErrorBoundary>
   )
 }
+
+const ExpensiveSpinner = ({ ms }: { ms: number }) => {
+  if (typeof window !== 'undefined') {
+    const start = Date.now()
+    while (Date.now() - start < ms) {}
+  }
+  return <Spinner />
+}