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:
- Refer to the Remix guide.
- Bind a D1 database to your Pages Function.
- Pass the
--d1 BINDING_NAME=DATABASE_ID
flag towrangler dev
when developing locally.BINDING_NAME
should match what call in your code, andDATABASE_ID
should match thedatabase_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 aLoaderFunction
. - If you configured a binding named
DB
, then you would access D1’s client API methods viacontext.env.DB
.
app/routes/_index.tsximport 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>Welcome to Remix</h1> <div> A value from D1: <pre>{JSON.stringify(results)}</pre> </div> </div> );
}