已完成将 API 调用逻辑迁移到 React Query 的修改

package.json

@@ -15,6 +15,7 @@
     "@hono/vite-dev-server": "^0.19.1",
     "@hono/zod-openapi": "^0.19.7",
     "@hono/zod-validator": "^0.4.3",
+    "@tanstack/react-query": "^5.77.2",
     "hono": "^4.7.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

src/client/app.tsx

@@ -1,16 +1,10 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import { use, Suspense } from 'react'
 import { hc } from 'hono/client'
-import type { InferResponseType } from 'hono/client'
+import { useQuery } from '@tanstack/react-query'
 import type { AppType } from '../server/api/base'
 
 const client = hc<AppType>('/api')
 
-const fetchData = async () => {
-  const data = await client.index.$get({ query: { name: 'Hono' } })
-  return data.json()
-}
-
 const Home = () => {
   return (
     <div>
@@ -29,9 +23,19 @@ const About = () => {
   )
 }
 
-const ApiDemo = ({ promise }: { promise: Promise<InferResponseType<typeof client.index.$get>> }) => {
-  const data = use(promise)
-  return <h2 className="text-2xl">{data.message}</h2>
+const ApiDemo = () => {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['apiData'],
+    queryFn: async () => {
+      const res = await client.index.$get({ query: { name: 'Hono' } })
+      return res.json()
+    }
+  })
+
+  if (isLoading) return <div>Loading...</div>
+  if (error) return <div>Error: {error.message}</div>
+
+  return <h2 className="text-2xl">{data?.message}</h2>
 }
 
 const router = createBrowserRouter([
@@ -45,11 +49,7 @@ const router = createBrowserRouter([
   },
   {
     path: '/api-demo',
-    element: (
-      <Suspense fallback={'loading...'}>
-        <ApiDemo promise={fetchData()} />
-      </Suspense>
-    ),
+    element: <ApiDemo />,
   },
 ])
 

src/client/index.tsx

@@ -1,8 +1,15 @@
 import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import App from './app'
 
+const queryClient = new QueryClient()
+
 const rootElement = document.getElementById('root')
 if (rootElement) {
   const root = createRoot(rootElement)
-  root.render(<App />)
+  root.render(
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  )
 }