apiClient.tsx

// app/routes/echo/_title.island.tsx
import { useEffect, useState } from 'hono/jsx'
import { hc } from 'hono/client'
import type { Hono } from 'hono'
import api from './api'

export const apiClient = <T extends Hono>(path: string = './api') => {
  let url: string | undefined
  if (globalThis.window) {
    url = new URL(path, window.location.href + '/').toString()
  } else {
    url = path
  }
  return hc<T>(url)
}

export default function Title() {
  const [title, setTitle] = useState('')

  useEffect(() => {
    const client = apiClient<typeof api>('./api')
    ;(async () => {
      const res = await client.echo.$post({
        json: {
          message: 'Hello'
        }
      })
      const data = await res.json()
      setTitle(data.message)
    })()
  }, [])

  return <h1>{title}</h1>
}