← Cloudflare D1 / d1 / examples

Запрос к D1 из Remix

Remix представляет собой веб-фреймворк полного цикла, который работает как на клиенте, так и на сервере. Из Remix можно выполнять запросы к вашим базам данных D1 с помощью загрузка данных ↗ API с useLoaderData ↗ хук.

Чтобы настроить новый сайт на Remix в Cloudflare Pages с возможностью запросов к D1:

См. руководство по Remix.
Привяжите базу данных D1 к своему Pages Function.
Передайте --d1 BINDING_NAME=DATABASE_ID флаг для wrangler dev при локальной разработке. BINDING_NAME должен соответствовать вызову в вашем коде, и DATABASE_ID должен совпадать с database_id заданный в вашем конфигурационный файл Wrangler: например, --d1 DB=xxxx-xxxx-xxxx-xxxx-xxxx.

В следующем примере показано, как определить Remix loader ↗ с привязкой к базе данных D1.

Привязки передаются через context.cloudflare.env параметр, переданный в LoaderFunction.
Если вы настроили привязка с именем 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>
  );
}