Introduced Drizzle documentation.

Author: Chriztiaan

client-sdk-references/javascript-web/javascript-orm/drizzle.mdx

@@ -1,8 +1,197 @@
 ---
-title: "Drizzle (coming soon)"
-icon: "person-digging"
-iconType: "solid"
+title: "Drizzle"
 mode: wide
 ---
 
-We are currently working on adding support for Drizzle.
+<Card
+  title="npm: @powersync/drizzle-driver"
+  icon="npm"
+  href="https://www.npmjs.com/package/@powersync/drizzle-driver"
+  horizontal
+/>
+
+This package enables using [Drizzle](https://orm.drizzle.team/) with PowerSync React Native and web SDKs.
+
+## Setup
+
+Set up the PowerSync Database and wrap it with Drizzle.
+
+Currently, you need to create the Drizzle schema manually, and it should match the table definitions of your PowerSync AppSchema.
+
+```js
+import { wrapPowerSyncWithDrizzle } from "@powersync/drizzle-driver";
+import { PowerSyncDatabase } from "@powersync/web";
+import { index, integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+import { appSchema } from "./schema";
+
+import { wrapPowerSyncWithDrizzle } from "@powersync/drizzle-driver";
+
+export const lists = sqliteTable("lists", {
+  id: text("id"),
+  name: text("name"),
+});
+
+export const todos = sqliteTable("todos", {
+  id: text("id"),
+  description: text("description"),
+  list_id: text("list_id"),
+  created_at: text("created_at"),
+});
+
+export const listsRelations = relations(lists, ({ one, many }) => ({
+  todos: many(todos),
+}));
+
+export const todosRelations = relations(todos, ({ one, many }) => ({
+  list: one(lists, {
+    fields: [todos.list_id],
+    references: [lists.id],
+  }),
+}));
+
+export const drizzleSchema = {
+  lists,
+  todos,
+  listsRelations,
+  todosRelations,
+};
+
+export const powerSyncDb = new PowerSyncDatabase({
+  database: {
+    dbFilename: "test.sqlite",
+  },
+  schema: appSchema,
+});
+
+export const db = wrapPowerSyncWithDrizzle(powerSyncDb, {
+  schema: drizzleSchema,
+});
+```
+
+## Compilable queries
+
+To use Drizzle queries in your hooks and composables, they currently need to be converted using `toCompilableQuery`.
+
+```js
+import { toCompilableQuery } from "@powersync/drizzle-driver";
+
+const query = db.select().from(users);
+const { data: listRecords, isLoading } = useQuery(toCompilableQuery(query));
+```
+
+## Usage Examples
+
+Below are examples comparing Drizzle and PowerSync syntax for common database operations.
+
+### Select Operations
+
+<CodeGroup>
+  ```js Drizzle
+  const result = await db.select().from(users);
+
+// [{ id: '1', name: 'user1' }, { id: '2', name: 'user2' }]
+
+````
+
+```js PowerSync
+const result = await powerSyncDb.getAll('SELECT * from users');
+
+// [{ id: '1', name: 'user1' }, { id: '2', name: 'user2' }]
+````
+
+</CodeGroup>
+
+### Insert Operations
+
+<CodeGroup>
+  ```js Drizzle
+  await db.insert(users).values({ id: '1', name: 'John' });
+  const result = await db.select().from(users);
+
+// [{ id: '1', name: 'John' }]
+
+````
+
+```js PowerSync
+await powerSyncDb.execute('INSERT INTO users (id, name) VALUES(1, ?)', ['John']);
+const result = await powerSyncDb.getAll('SELECT * from users');
+
+// [{ id: '1', name: 'John' }]
+````
+
+</CodeGroup>
+
+### Delete Operations
+
+<CodeGroup>
+  ```js Drizzle
+  await db.insert(users).values({ id: '2', name: 'Ben' });
+  await db.delete(users).where(eq(users.name, 'Ben'));
+  const result = await db.select().from(users);
+
+// []
+
+````
+
+```js PowerSync
+await powerSyncDb.execute('INSERT INTO users (id, name) VALUES(2, ?)', ['Ben']);
+await powerSyncDb.execute(`DELETE FROM users WHERE name = ?`, ['Ben']);
+const result = await powerSyncDb.getAll('SELECT * from users');
+
+// []
+````
+
+</CodeGroup>
+
+### Update Operations
+
+<CodeGroup>
+  ```js Drizzle
+await db.insert(users).values({ id: '3', name: 'Lucy' });
+await db.update(users).set({ name: 'Lucy Smith' }).where(eq(users.name, 'Lucy'));
+const result = await db.select({ name: users.name }).from(users).get();
+
+// 'Lucy Smith'
+
+````
+
+```js PowerSync
+await powerSyncDb.execute('INSERT INTO users (id, name) VALUES(3, ?)', ['Lucy']);
+await powerSyncDb.execute('UPDATE users SET name = ? WHERE name = ?', ['Lucy Smith', 'Lucy']);
+const result = await powerSyncDb.get('SELECT name FROM users WHERE name = ?', ['Lucy Smith'])
+
+// 'Lucy Smith'
+````
+
+</CodeGroup>
+
+### Transactions
+
+<CodeGroup>
+
+```js Drizzle
+await db.transaction(async (transaction) => {
+  await db.insert(users).values({ id: "4", name: "James" });
+  await db
+    .update(users)
+    .set({ name: "Lucy James Smith" })
+    .where(eq(users.name, "James"));
+});
+
+const result = await db.select({ name: users.name }).from(users).get();
+
+// 'James Smith'
+```
+
+```js PowerSync
+await powerSyncDb.writeTransaction((transaction) => {
+  await transaction.execute('INSERT INTO users (id, name) VALUES(4, ?)', ['James']);
+  await transaction.execute("UPDATE users SET name = ? WHERE name = ?", ['James Smith', 'James']);
+})
+const result = await powerSyncDb.get('SELECT name FROM users WHERE name = ?', ['James Smith'])
+
+// 'James Smith'
+```
+
+</CodeGroup>
+````

client-sdk-references/javascript-web/javascript-orm/overview.mdx

@@ -7,11 +7,18 @@ sidebarTitle: Overview
 An introduction to using ORMs with PowerSync is available on our blog [here](https://www.powersync.com/blog/using-orms-with-powersync).
 
 The following ORMs are officially supported:
+
 <CardGroup>
-  <Card title="Kysely" href="/client-sdk-references/javascript-web/javascript-orm/kysely">
-  Kysely query builder for PowerSync.
+  <Card
+    title="Kysely"
+    href="/client-sdk-references/javascript-web/javascript-orm/kysely"
+  >
+    Kysely query builder for PowerSync.
   </Card>
-  <Card title="Drizzle (coming soon)" href="/client-sdk-references/javascript-web/javascript-orm/drizzle">
-  Drizzle is coming soon.
+  <Card
+    title="Drizzle"
+    href="/client-sdk-references/javascript-web/javascript-orm/drizzle"
+  >
+    Drizzle ORM for PowerSync.
   </Card>
-</CardGroup>
+</CardGroup>