Cloudflare D1とnext-on-pageでenv.DBを渡したいがタイプエラーになる Drizzle hono

はじめに

CloudflareのD1をhonoのAPIで読み取るのに時間がかかったのでまとめます

問題

今回next-on-pageを利用していたのでc.env.DBからは読み込めないようなので以下のコードを書いた

import { users } from "@/db/schema";
import { drizzle } from "drizzle-orm/d1";
import { Hono } from "hono";
import { handle } from "hono/vercel";

export const runtime = "edge";

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      DB: D1Database;
    }
  }
}

const app = new Hono().basePath("/api");

app.get("/ping", (c) => {
  return c.text("pong");
});

app.get("/query/customers", async (c) => {
  const db = drizzle(process.env.DB);
  const result = await db.select().from(users).all();
  return c.json(result);
});

export const GET = handle(app);

しかしVSCodeではタイプエラーが発生

ES2015 module syntax is preferred over namespaces

しかたなくenv.d.tsに移動してみましたが依然としてprocess.env.DBからエラーが出ました。

解決策

型を上手く合わせることで動くようになりました

import { users } from "@/db/schema";
import { drizzle } from "drizzle-orm/d1";
import { Hono } from "hono";
import { handle } from "hono/vercel";

export const runtime = "edge";
const app = new Hono().basePath("/api");

app.get("/ping", (c) => {
  return c.text("pong");
});

app.get("/query/customers", async (c) => {
  console.log(c.env);
  const db = drizzle(process.env.DB as unknown as D1Database);
  const result = await db.select().from(users).all();
  return c.json(result);
});

export const GET = handle(app);

おわりに

かなり沼ってしまったのですが一旦これでも良いのではないかと思いました。