From a9aaa4e63132ba1335af7b994a98db71c8ed4576 Mon Sep 17 00:00:00 2001 From: Christiaan Landman Date: Thu, 7 Nov 2024 16:59:06 +0200 Subject: [PATCH 1/5] Introduced Drizzle documentation. --- .../javascript-web/javascript-orm/drizzle.mdx | 197 +++++++++++++++++- .../javascript-orm/overview.mdx | 17 +- 2 files changed, 205 insertions(+), 9 deletions(-) diff --git a/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx b/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx index e6794e33..6adf97bb 100644 --- a/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx +++ b/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. + + +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 + + + ```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' }] +```` + + + +### Insert Operations + + + ```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' }] +```` + + + +### Delete Operations + + + ```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'); + +// [] +```` + + + +### Update Operations + + + ```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' +```` + + + +### Transactions + + + +```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' +``` + + +```` diff --git a/client-sdk-references/javascript-web/javascript-orm/overview.mdx b/client-sdk-references/javascript-web/javascript-orm/overview.mdx index 0f81a2b8..d742db20 100644 --- a/client-sdk-references/javascript-web/javascript-orm/overview.mdx +++ b/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: + - - Kysely query builder for PowerSync. + + Kysely query builder for PowerSync. - - Drizzle is coming soon. + + Drizzle ORM for PowerSync. - \ No newline at end of file + From 91427a18a9ae41153bfe893ff68d279e89c5a247 Mon Sep 17 00:00:00 2001 From: Christiaan Landman Date: Thu, 7 Nov 2024 17:04:54 +0200 Subject: [PATCH 2/5] Whitespace. --- .../javascript-web/javascript-orm/drizzle.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx b/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx index 6adf97bb..a824fc69 100644 --- a/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx +++ b/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx @@ -97,6 +97,7 @@ Below are examples comparing Drizzle and PowerSync syntax for common database op const result = await powerSyncDb.getAll('SELECT * from users'); // [{ id: '1', name: 'user1' }, { id: '2', name: 'user2' }] + ```` @@ -117,6 +118,7 @@ await powerSyncDb.execute('INSERT INTO users (id, name) VALUES(1, ?)', ['John']) const result = await powerSyncDb.getAll('SELECT * from users'); // [{ id: '1', name: 'John' }] + ```` @@ -139,6 +141,7 @@ await powerSyncDb.execute(`DELETE FROM users WHERE name = ?`, ['Ben']); const result = await powerSyncDb.getAll('SELECT * from users'); // [] + ```` @@ -161,6 +164,7 @@ await powerSyncDb.execute('UPDATE users SET name = ? WHERE name = ?', ['Lucy Smi const result = await powerSyncDb.get('SELECT name FROM users WHERE name = ?', ['Lucy Smith']) // 'Lucy Smith' + ```` @@ -191,7 +195,7 @@ await powerSyncDb.writeTransaction((transaction) => { const result = await powerSyncDb.get('SELECT name FROM users WHERE name = ?', ['James Smith']) // 'James Smith' + ``` -```` From d613f0a04d511017ea06f287c183e3eeab71ef11 Mon Sep 17 00:00:00 2001 From: Christiaan Landman Date: Mon, 11 Nov 2024 12:40:26 +0200 Subject: [PATCH 3/5] Added relations import to setup example. --- client-sdk-references/javascript-web/javascript-orm/drizzle.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx b/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx index a824fc69..32d123e9 100644 --- a/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx +++ b/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx @@ -21,6 +21,7 @@ Currently, you need to create the Drizzle schema manually, and it should match t ```js import { wrapPowerSyncWithDrizzle } from "@powersync/drizzle-driver"; import { PowerSyncDatabase } from "@powersync/web"; +import { relations } from "drizzle-orm"; import { index, integer, sqliteTable, text } from "drizzle-orm/sqlite-core"; import { appSchema } from "./schema"; From 7749abcbaf8f7418a87243f22da6d50664f7047b Mon Sep 17 00:00:00 2001 From: Christiaan Landman Date: Tue, 12 Nov 2024 19:09:54 +0200 Subject: [PATCH 4/5] Update client-sdk-references/javascript-web/javascript-orm/drizzle.mdx Co-authored-by: benitav --- client-sdk-references/javascript-web/javascript-orm/drizzle.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx b/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx index 32d123e9..69fdb174 100644 --- a/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx +++ b/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx @@ -10,7 +10,7 @@ mode: wide horizontal /> -This package enables using [Drizzle](https://orm.drizzle.team/) with PowerSync React Native and web SDKs. +This package enables using [Drizzle](https://orm.drizzle.team/) with the PowerSync [React Native](/client-sdk-references/react-native-and-expo) and [JavaScript Web](/client-sdk-references/javascript-web) SDKs. ## Setup From 37cd5a423798a6f767bb0ac1819b628aa0a7072b Mon Sep 17 00:00:00 2001 From: Christiaan Landman Date: Wed, 13 Nov 2024 10:32:18 +0200 Subject: [PATCH 5/5] Added watched query example for Drizzle. --- .../javascript-web/javascript-orm/drizzle.mdx | 38 +++++++++++++++++-- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx b/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx index 69fdb174..d09dab59 100644 --- a/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx +++ b/client-sdk-references/javascript-web/javascript-orm/drizzle.mdx @@ -16,7 +16,7 @@ This package enables using [Drizzle](https://orm.drizzle.team/) with the PowerSy 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. +Currently, you need to create the Drizzle schema manually, and it should match the table definitions of your PowerSync [client-side schema](/installation/client-side-setup/define-your-schema). ```js import { wrapPowerSyncWithDrizzle } from "@powersync/drizzle-driver"; @@ -25,8 +25,6 @@ import { relations } from "drizzle-orm"; 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"), @@ -200,3 +198,37 @@ const result = await powerSyncDb.get('SELECT name FROM users WHERE name = ?', [' ``` + +### Watched Queries + + + +```js Drizzle +import { toCompilableQuery } from "@powersync/drizzle-driver"; + +// `compile()` is automatically called internally in the hooks, but not for `watch()` +const compiledQuery = toCompilableQuery(db.select().from(users)).compile(); + +powerSyncDb.watch(compiledQuery.sql, compiledQuery.parameters, { + onResult(results) { + console.log(results.rows?._array); + + // With Typescript typing + // console.log((results.rows?._array as (typeof users.$inferSelect)[])); + }, +}); + +// [{ id: '1', name: 'John' }] +``` + +```js PowerSync +powerSyncDb.watch("select * from users", [], { + onResult(results) { + console.log(results.rows?._array); + }, +}); + +// [{ id: '1', name: 'John' }] +``` + +