RemixからD1をクエリする

Remixは、クライアントとサーバーの両方で動作するフルスタックWebフレームワークです。Remixのデータローディング ↗ APIとuseLoaderData ↗フックを使用して、RemixからD1データベースをクエリできます。

D1をクエリできるCloudflare Pages上に新しいRemixサイトをセットアップするには：

1. Remixガイドを参照してください。
2. Pages FunctionにD1データベースをバインドします。
3. ローカルで開発する際に、wrangler devに--d1 BINDING_NAME=DATABASE_IDフラグを渡します。BINDING_NAMEはコード内で呼び出すものと一致し、DATABASE_IDはwrangler.tomlで定義されたdatabase_idと一致する必要があります。例えば、--d1 DB=xxxx-xxxx-xxxx-xxxx-xxxxのようになります。

以下の例は、D1データベースにバインディングを持つRemixのloader ↗を定義する方法を示しています。

• バインディングは、LoaderFunctionに渡されるcontext.envパラメータを通じて渡されます。
• DBという名前のバインディングを設定した場合、context.env.DBを介してD1のクライアントAPIメソッドにアクセスできます。

TypeScript

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;

  let { results } = await env.DB.prepare("SELECT * FROM users LIMIT 5").all();
  return json(results);
};

export default function Index() {
  const results = useLoaderData<typeof loader>();
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <h1>Remixへようこそ</h1>
      <div>
        D1からの値：
        <pre>{JSON.stringify(results)}</pre>
      </div>
    </div>
  );
}