Remix から D1 をクエリする

Remix はクライアントとサーバーの両方で動くフルスタック Web フレームワークです。Remix のデータ読み込み ↗ API と useLoaderData ↗ フックで、Remix から D1 データベースをクエリできます。

D1 をクエリできる新しい Remix サイトを Cloudflare Pages に用意する手順は次のとおりです。

Remix ガイドを参照します。
D1 データベースを Pages Function にバインドします。
ローカル開発では wrangler dev に --d1 BINDING_NAME=DATABASE_ID フラグを渡します。BINDING_NAME はコード内の呼び出し名と一致させ、DATABASE_ID は Wrangler 設定ファイルの database_id と一致させます。例: --d1 DB=xxxx-xxxx-xxxx-xxxx-xxxx。

次の例は、D1 データベースへのバインディングを持つ Remix loader ↗ の定義方法です。

バインディングは、LoaderFunction に渡される context.cloudflare.env パラメータ経由で受け取ります。
DB という名前のバインディングを設定した場合、D1 Workers Binding API のメソッドは context.cloudflare.env.DB 経由で使えます。

import type { LoaderFunction } from "@remix-run/cloudflare";
import { json } from "@remix-run/cloudflare";
import { useLoaderData } from "@remix-run/react";

interface Env {
  DB: D1Database;
}

export const loader: LoaderFunction = async ({ context, params }) => {
  let env = context.cloudflare.env as Env;

  try {
    let { results } = await env.DB.prepare("SELECT * FROM users LIMIT 5").run();
    return json(results);
  } catch (error) {
    return json({ error: "Failed to fetch users" }, { status: 500 });
  }
};

export default function Index() {
  const results = useLoaderData<typeof loader>();
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <h1>Welcome to Remix</h1>
      <div>
        A value from D1:
        <pre>{JSON.stringify(results)}</pre>
      </div>
    </div>
  );
}