从 Remix 查询 D1

Remix 是一个在客户端和服务器端运行的全栈 Web 框架。您可以使用 Remix 的数据加载 ↗ API 和 useLoaderData ↗ hook 从 Remix 查询 D1 数据库。

要在 Cloudflare Pages 上设置可查询 D1 的新 Remix 站点：

请参阅 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 的绑定，则通过 context.cloudflare.env.DB 访问 D1 Workers Binding API 方法。

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 Customers 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>
  );
}