そんなことをしてもあまり良いことはないですが、これをRemix（Vite）の上で動かす方法を考えます。
import { Hono } from "hono"
const app = new Hono<{ Bindings: Env }>()
export default app
1つの開発サーバでサイトとAPIの両方を開発できるのでプロトタイピングによいかなと思いました。
Hono
このようにファイルを設置します。
app/routes/api.$/route.ts
Remixの場合はactionとloaderがGETとPOSTの役割をしているので、このようにRequestとEnvを渡すことが出来ます。
パスは/apiにします。
import { Hono } from "hono"
const app = new Hono<{ Bindings: Env }>()
app.get("/api/hello", c => {
return c.text("Hello")
})
export const action: ActionFunction = (props) => {
return app.fetch(props.request, props.context.cloudflare.env)
}
export const loader: LoaderFunction = (props) => {
return app.fetch(props.request, props.context.cloudflare.env)
}
このAPIについてはここで確認できます。
Yoga
このようにファイルを設置します。
app/routes/graphql/route.ts
こちらもRequestとEnvを渡すだけです。エンドポイントは/graphqlにします。
import { createYoga } from "graphql-yoga"
const app = createYoga<Env>({
schema: schema,
graphqlEndpoint: "/graphql",
})
export const action: ActionFunction = (props) => {
return app.fetch(props.request, props.context.cloudflare.env)
}
export const loader: LoaderFunction = (props) => {
return app.fetch(props.request, props.context.cloudflare.env)
}
型を読むとapp(props.request)でも動きます。
最後に
Workersはこれで実行できるので後からモノレポなどに変更できます。Remixの@のようなパスも解決されます。
$ bunx wrangler dev workers/graphql.ts
例えば、このように書き換えます。
import { createYoga } from "graphql-yoga"
const app = createYoga<Env>({
schema: schema,
graphqlEndpoint: "/graphql",
})
export default { fetch: app.fetch } satisfies ExportedHandler<Env>
Discussion