Query D1 from Remix (Remix에서 D1 쿼리하기)

이 문서는 Remix 애플리케이션에서 D1 데이터베이스를 쿼리하는 방법을 설명해요.

출처: 문서

본문

참고 (Note)

Remix는 더 이상 새 프로젝트에 권장되지 않아요. 새 애플리케이션에는 React Router를 대신 사용하세요. 기존 Remix 애플리케이션이 있다면 React Router로의 마이그레이션 ↗︎을 고려해 보세요.

Remix는 클라이언트와 서버 모두에서 동작하는 풀스택 웹 프레임워크예요. Remix의 데이터 로딩 ↗︎ API를 useLoaderData ↗︎ 훅과 함께 사용해 Remix에서 D1 데이터베이스를 쿼리할 수 있어요.

D1을 쿼리할 수 있는 새 Remix 사이트를 Cloudflare Pages에 설정하려면:

1. **Remix 가이드**를 참고하세요.
2. D1 데이터베이스를 Pages Function에 바인딩하세요.
3. 로컬에서 개발할 때 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 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>
  );
}