swr.tsx

import { render } from 'hono/jsx/dom'
import { hc } from 'hono/client'
import api from './api'

import useSWR from 'swr'

const client = hc<typeof api>('/api')

function App() {
  const $get = client.index.$get
  const fetcher = async () => {
    const res = await $get()
    return await res.json()
  }

  const { data, error, isLoading } = useSWR('api', fetcher)

  if (isLoading) return <h1>Loading...</h1>
  if (error) return <h1>Error: {error.message}</h1>
  return <h1>Hello {data?.name}</h1>
}

const domNode = document.getElementById('root')!
render(<App />, domNode)