create hono example client-side

Author: codenickycode

client/src/example.tsx

@@ -3,32 +3,42 @@ import { Spinner } from './components/ui.spinner';
 import { Modal } from './components/ui.modal';
 import { useQuery } from '@tanstack/react-query';
 import { getServerUrl } from './config';
+import { hc } from 'hono/client';
+import type { ServerApi } from '../../server/src/types';
+import { useMonitor } from './services/monitor.use-monitor';
 
 const serverUrl = getServerUrl();
 
-export const Example = () => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const serverOkQuery = useQuery({
-    queryKey: ['example'],
+const { $get } = hc<ServerApi>(serverUrl)['index'];
+
+const useServerOkQuery = () => {
+  const { captureException } = useMonitor();
+  return useQuery({
+    queryKey: ['hello-from-server'],
     queryFn: async () => {
-      return fetch(serverUrl)
+      return $get()
         .then(async (res) => {
           if (!res.ok) {
             throw res;
           }
-          return res.text();
+          return res.json();
         })
         .catch((error) => {
-          console.error(error);
+          captureException(error);
           return null;
         });
     },
   });
+};
+
+export const Example = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const serverOkQuery = useServerOkQuery();
   return (
     <div className="flex flex-col gap-4">
       <h1>Hello from React!</h1>
       <div>
-        <p>Server connection: {serverOkQuery.data ? '✅' : '❌'}</p>
+        <p>Server connection: {serverOkQuery.isSuccess ? '✅' : '❌'}</p>
       </div>
       <div>
         <p>

client/tsconfig.app.json

@@ -12,5 +12,5 @@
     "jsx": "react-jsx",
     "types": ["vitest/globals"]
   },
-  "include": ["src"]
+  "include": ["src", "../server/src/*"]
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-react-spa-cloudflare",
   "type": "module",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Starter package for react spa with cloudflare pages, workers, and kv",
   "bin": "./bin/cli.js",
   "scripts": {