Demo of drizzle in react-native.

Author: Chriztiaan

demos/react-native-supabase-todolist/app/views/todos/lists.tsx

@@ -7,8 +7,10 @@ import prompt from 'react-native-prompt-android';
 import { router, Stack } from 'expo-router';
 import { LIST_TABLE, TODO_TABLE, ListRecord } from '../../../library/powersync/AppSchema';
 import { useSystem } from '../../../library/powersync/system';
-import { useQuery, useStatus } from '@powersync/react-native';
+import { usePowerSync, useQuery, useStatus } from '@powersync/react-native';
 import { ListItemWidget } from '../../../library/widgets/ListItemWidget';
+import { drizzleSchema, lists } from '../../../library/powersync/DrizzleSchema';
+import { wrapPowerSyncWithDrizzle, toCompilableQuery } from "@powersync/drizzle-driver";
 
 const description = (total: number, completed: number = 0) => {
   return `${total - completed} pending, ${completed} completed`;
@@ -17,16 +19,8 @@ const description = (total: number, completed: number = 0) => {
 const ListsViewWidget: React.FC = () => {
   const system = useSystem();
   const status = useStatus();
-  const { data: listRecords } = useQuery<ListRecord & { total_tasks: number; completed_tasks: number }>(`
-      SELECT
-        ${LIST_TABLE}.*, COUNT(${TODO_TABLE}.id) AS total_tasks, SUM(CASE WHEN ${TODO_TABLE}.completed = true THEN 1 ELSE 0 END) as completed_tasks
-      FROM
-        ${LIST_TABLE}
-      LEFT JOIN ${TODO_TABLE}
-        ON  ${LIST_TABLE}.id = ${TODO_TABLE}.list_id
-      GROUP BY
-        ${LIST_TABLE}.id;
-      `);
+  const powersync = usePowerSync();
+  const drizzleDb = wrapPowerSyncWithDrizzle(powersync, { schema: drizzleSchema });
 
   const createNewList = async (name: string) => {
     const { userID } = await system.supabaseConnector.fetchCredentials();
@@ -35,21 +29,19 @@ const ListsViewWidget: React.FC = () => {
       `INSERT INTO ${LIST_TABLE} (id, created_at, name, owner_id) VALUES (uuid(), datetime(), ?, ?) RETURNING *`,
       [name, userID]
     );
-
     const resultRecord = res.rows?.item(0);
+    console.log("insert", resultRecord)
     if (!resultRecord) {
       throw new Error('Could not create list');
     }
   };
 
-  const deleteList = async (id: string) => {
-    await system.powersync.writeTransaction(async (tx) => {
-      // Delete associated todos
-      await tx.execute(`DELETE FROM ${TODO_TABLE} WHERE list_id = ?`, [id]);
-      // Delete list record
-      await tx.execute(`DELETE FROM ${LIST_TABLE} WHERE id = ?`, [id]);
-    });
-  };
+  const query = drizzleDb.select().from(lists);
+  // const query = drizzleDb.query.lists.findMany();
+
+
+  const { data: listRecords, isLoading } = useQuery(toCompilableQuery(query));
+  console.log('ssaaz', listRecords[0]);
 
   return (
     <View style={{ flex: 1, flexGrow: 1 }}>
@@ -58,6 +50,11 @@ const ListsViewWidget: React.FC = () => {
           headerShown: false
         }}
       />
+      <View>
+        {listRecords.map((r) => (
+          <Text key={r.id}>{r.id}-{r.name}</Text>
+        ))}
+      </View>
       <FAB
         style={{ zIndex: 99, bottom: 0 }}
         icon={{ name: 'add', color: 'white' }}
@@ -78,26 +75,6 @@ const ListsViewWidget: React.FC = () => {
           );
         }}
       />
-      <ScrollView key={'lists'} style={{ maxHeight: '90%' }}>
-        {!status.hasSynced ? (
-          <Text>Busy with sync...</Text>
-        ) : (
-          listRecords.map((r) => (
-            <ListItemWidget
-              key={r.id}
-              title={r.name}
-              description={description(r.total_tasks, r.completed_tasks)}
-              onDelete={() => deleteList(r.id)}
-              onPress={() => {
-                router.push({
-                  pathname: 'views/todos/edit/[id]',
-                  params: { id: r.id }
-                });
-              }}
-            />
-          ))
-        )}
-      </ScrollView>
 
       <StatusBar style={'light'} />
     </View>

demos/react-native-supabase-todolist/library/powersync/DrizzleSchema.ts

@@ -0,0 +1,48 @@
+import { relations } from 'drizzle-orm';
+import { index, integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
+
+export const lists = sqliteTable('lists', {
+  id: text('id').primaryKey().notNull(),
+  created_at: text('created_at'),
+  name: text('name').notNull(),
+  owner_id: text('owner_id')
+});
+
+export const todos = sqliteTable(
+  'todos',
+  {
+    id: text('id').primaryKey().notNull(),
+    list_id: text('list_id')
+      .notNull()
+      .references(() => lists.id),
+    created_at: text('created_at'),
+    completed_at: text('completed_at'),
+    description: text('description').notNull(),
+    created_by: text('created_by'),
+    completed_by: text('completed_by'),
+    completed: integer('completed')
+  },
+  (todos) => ({
+    listIdx: index('listIdx').on(todos.list_id)
+  })
+);
+
+// Define relations for 'lists' (one-to-many with 'todos')
+export const listsRelations = relations(lists, ({ many }) => ({
+  todos: many(todos)
+}));
+
+// Define relations for 'todos' (many-to-one with 'lists')
+const todosRelations = relations(todos, ({ one }) => ({
+  list: one(lists, {
+    fields: [todos.list_id],
+    references: [lists.id]
+  })
+}));
+
+export const drizzleSchema = {
+  lists,
+  todos,
+  listsRelations,
+  todosRelations
+};

demos/react-native-supabase-todolist/package.json

@@ -11,8 +11,11 @@
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@expo/vector-icons": "^14.0.3",
     "@journeyapps/react-native-quick-sqlite": "^2.0.0",
+    "@op-engineering/op-sqlite": "^9.2.1",
     "@powersync/attachments": "workspace:*",
     "@powersync/common": "workspace:*",
+    "@powersync/drizzle-driver": "workspace:*",
+    "@powersync/op-sqlite": "^0.0.6",
     "@powersync/react": "workspace:*",
     "@powersync/react-native": "workspace:*",
     "@react-native-community/masked-view": "^0.1.11",