drizzle example

Author: drewjs

drizzle-orm/.gitignore

@@ -4,3 +4,4 @@ node_modules
 /build
 /public/build
 .env
+*.db

drizzle-orm/README.md

@@ -13,8 +13,8 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 Relevant files:
 
 - [drizzle](./drizzle) migrations and drizzle-related meta information
-- [app/schema.ts] table schemas and data models
-- [app/db.server.ts] setup database client
+- [app/db/db.server.ts] setup database client
+- [package.json] add `db:*` scripts and drizzle dependencies
 
 ## Related Links
 

drizzle-orm/app/db.server.ts

@@ -0,0 +1,10 @@
+import Database from "better-sqlite3";
+import { drizzle } from "drizzle-orm/better-sqlite3";
+import { migrate } from "drizzle-orm/better-sqlite3/migrator";
+import * as schema from "./schema";
+
+const sqlite = new Database("sqlite.db");
+
+export const db = drizzle(sqlite, { schema });
+
+migrate(db, { migrationsFolder: "drizzle" });

drizzle-orm/app/routes/_index.tsx

@@ -1,7 +1,58 @@
+import { type ActionArgs } from "@remix-run/node";
+import { Form, useLoaderData } from "@remix-run/react";
+import { sql } from "drizzle-orm";
+import { db } from "~/db.server";
+import { example } from "~/schema";
+
+export async function action({ request }: ActionArgs) {
+  let formData = await request.formData();
+  let intent = formData.get("intent");
+
+  if (intent === "update") {
+    await db.insert(example).values({});
+    return new Response(null, { status: 201 });
+  }
+
+  if (intent == "reset") {
+    await db.delete(example);
+    return new Response(null, { status: 204 });
+  }
+
+  return new Response(null, { status: 400 });
+}
+
+export function loader() {
+  let result = db
+    .select({
+      count: sql<number>`COUNT(*)`,
+      lastUpdated: sql<string>`MAX(created_at)`,
+    })
+    .from(example)
+    .get();
+
+  return {
+    count: result?.count ?? 0,
+    lastUpdated: result?.lastUpdated ?? "never",
+  };
+}
+
 export default function Index() {
+  const { count, lastUpdated } = useLoaderData<typeof loader>();
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
       <h1>Welcome to Remix</h1>
+      <p>
+        Count: {count} <br />
+        Last updated: {lastUpdated}
+      </p>
+      <Form method="post">
+        <button type="submit" name="intent" value="update">
+          Update
+        </button>
+        <button type="submit" name="intent" value="reset">
+          Reset
+        </button>
+      </Form>
     </div>
   );
 }

drizzle-orm/app/schema.ts

@@ -0,0 +1,7 @@
+import { sql } from 'drizzle-orm'
+import { sqliteTable, integer, text } from "drizzle-orm/sqlite-core";
+
+export const example = sqliteTable('example', {
+  id: integer('id').primaryKey(),
+  createdAt: text('created_at').default(sql`CURRENT_TIMESTAMP`),
+})

drizzle-orm/drizzle.config.ts

@@ -0,0 +1,6 @@
+import type { Config } from "drizzle-kit";
+
+export default {
+  schema: "./app/schema.ts",
+  out: "./drizzle",
+} satisfies Config;

drizzle-orm/drizzle/0000_mute_groot.sql

@@ -0,0 +1,4 @@
+CREATE TABLE `example` (
+	`id` integer PRIMARY KEY NOT NULL,
+	`created_at` text DEFAULT CURRENT_TIMESTAMP
+);

drizzle-orm/drizzle/meta/0000_snapshot.json

@@ -0,0 +1,38 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "id": "0be79972-b6bf-4225-88d7-95a723174903",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "example": {
+      "name": "example",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}

drizzle-orm/drizzle/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "5",
+      "when": 1697441145549,
+      "tag": "0000_mute_groot",
+      "breakpoints": true
+    }
+  ]
+}

drizzle-orm/package.json

@@ -4,22 +4,27 @@
   "scripts": {
     "build": "remix build",
     "dev": "remix dev",
+    "generate": "drizzle-kit generate:sqlite",
     "start": "remix-serve build",
     "typecheck": "tsc"
   },
   "dependencies": {
     "@remix-run/node": "^1.19.3",
     "@remix-run/react": "^1.19.3",
     "@remix-run/serve": "^1.19.3",
+    "better-sqlite3": "^9.0.0",
+    "drizzle-orm": "^0.28.6",
     "isbot": "^3.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@remix-run/dev": "^1.19.3",
     "@remix-run/eslint-config": "^1.19.3",
+    "@types/better-sqlite3": "^7.6.5",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
+    "drizzle-kit": "^0.19.13",
     "eslint": "^8.27.0",
     "typescript": "^4.8.4"
   },