Cloudflare Docs
D1
Edit this page on GitHub
Set theme to dark (⇧+D)

Query D1 from Remix

Query your D1 database from a Remix application.

Remix is a full-stack web framework that operates on both client and server. You can query your D1 database(s) from Remix using Remix’s data loading API with the useLoaderData hook.

To set up a new Remix site on Cloudflare Pages that can query D1:

  1. Refer to the Remix guide.
  2. Bind a D1 database to your Pages Function.
  3. Pass the --d1 BINDING_NAME=DATABASE_ID flag when developing locally. BINDING_NAME should match what call in your code, and DATABASE_ID should match the database_id defined in your wrangler.toml: for example, --d1 DB=xxxx-xxxx-xxxx-xxxx-xxxx.

The following example shows you how to define a Remix loader that has a binding to a D1 database.

  • Bindings are passed through on the context.env parameter passed to a LoaderFunction.
  • If you configured a binding named DB, then you would access D1’s client API methods via context.env.DB.
app/routes/_index.tsx
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.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>Welcome to Remix</h1>
<div>
A value from D1:
<pre>{JSON.stringify(results)}</pre>
</div>
</div>
);
}