Merge pull request #105 from powersync-ja/feature/sdk-common-watch-overloads

[Update] powersync-sdk-common: watch/onChange API overloads to support callbacks

Author: Chriztiaan

.changeset/clever-phones-hang.md

@@ -0,0 +1,5 @@
+---
+"@journeyapps/powersync-react": minor
+---
+
+No longer using the async iterator version of the watch method for the usePowerSyncWatchedQuery hook, using the callback version instead.

.changeset/heavy-dogs-work.md

@@ -0,0 +1,5 @@
+---
+"powersync-example": minor
+---
+
+Updated/renamed implementation of `attachmentIds` to `onAttachmentIdsChange`, now implements a callback approach instead of AsyncGenerator.

.changeset/slow-years-pull.md

@@ -0,0 +1,5 @@
+---
+"@journeyapps/powersync-attachments": major
+---
+
+Renamed abstract `attachmentIds` to `onAttachmentIdsChange` in `AbstractAttachmentQueue`, changed to use callback signature instead of an AsyncGenerator.

.changeset/sweet-pumpkins-explain.md

@@ -0,0 +1,5 @@
+---
+"@journeyapps/powersync-sdk-common": minor
+---
+
+Introduced overloaded versions of watch and onChange methods to support a callback approach to handle results and errors alongside the existing AsyncGenerator mechanism.

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

@@ -16,13 +16,10 @@ export class PhotoAttachmentQueue extends AbstractAttachmentQueue {
     await super.init();
   }
 
-  async *attachmentIds(): AsyncIterable<string[]> {
-    for await (const result of this.powersync.watch(
-      `SELECT photo_id as id FROM ${TODO_TABLE} WHERE photo_id IS NOT NULL`,
-      []
-    )) {
-      yield result.rows?._array.map((r) => r.id) ?? [];
-    }
+  onAttachmentIdsChange(onUpdate: (ids: string[]) => void): void {
+    this.powersync.watch(`SELECT photo_id as id FROM ${TODO_TABLE} WHERE photo_id IS NOT NULL`, [], {
+      onResult: (result) => onUpdate(result.rows?._array.map((r) => r.id) ?? [])
+    });
   }
 
   async newAttachmentRecord(record?: Partial<AttachmentRecord>): Promise<AttachmentRecord> {

packages/powersync-attachments/README.md

@@ -63,21 +63,18 @@ import { AbstractAttachmentQueue } from '@journeyapps/powersync-attachments';
 export class AttachmentQueue extends AbstractAttachmentQueue {}
 ```
 
-2. Implement `attachmentIds`, an `AsyncIterator` method to return an array of `string` values of IDs that relate to attachments in your app. We recommend using `PowerSync`'s `watch` query to return the all IDs of attachments in your app.
+2. Implement `onAttachmentIdsChange`, which takes in a callback to handle an array of `string` values of IDs that relate to attachments in your app. We recommend using `PowerSync`'s `watch` query to return the all IDs of attachments in your app.
 
    In this example, we query all photos that have been captured as part of an inspection and map these to an array of `string` values.
 
 ```javascript
 import { AbstractAttachmentQueue } from '@journeyapps/powersync-attachments';
 
 export class AttachmentQueue extends AbstractAttachmentQueue {
-  async *attachmentIds() {
-    for await (const result of this.powersync.watch(
-      `SELECT photo_id as id FROM checklists WHERE photo_id IS NOT NULL`,
-      []
-    )) {
-      yield result.rows?._array.map((r) => r.id) ?? [];
-    }
+  onAttachmentIdsChange(onUpdate) {
+    this.powersync.watch('SELECT photo_id as id FROM checklists WHERE photo_id IS NOT NULL', [], {
+      onResult: (result) => onUpdate(result.rows?._array.map((r) => r.id) ?? [])
+   });
   }
 }
 ```

packages/powersync-attachments/src/AbstractAttachmentQueue.ts

@@ -57,15 +57,20 @@ export abstract class AbstractAttachmentQueue<T extends AttachmentQueueOptions =
   }
 
   /**
-   * Returns an async iterator that yields attachment IDs that need to be synced.
-   * In most cases this will be a watch query
+   * Takes in a callback that gets invoked with attachment IDs that need to be synced.
+   * In most cases this will contain a watch query.
    *
-   * Example:
-   * for await (const result of powersync.watch('SELECT photo_id as id FROM todos WHERE photo_id IS NOT NULL', [])) {
-   *    yield result.rows?._array.map((r) => r.id) ?? [];
+   * @example
+   * ```javascript
+   * onAttachmentIdsChange(onUpdate) {
+   *    this.powersync.watch('SELECT photo_id as id FROM todos WHERE photo_id IS NOT NULL', [], { 
+   *        onResult: (result) => onUpdate(result.rows?._array.map((r) => r.id) ?? []) 
+   *    });
    * }
+   * ```
    */
-  abstract attachmentIds(): AsyncIterable<string[]>;
+  abstract onAttachmentIdsChange(onUpdate: (ids: string[]) => void): void;
+
 
   /**
    * Create a new AttachmentRecord, this gets called when the attachment id is not found in the database.
@@ -106,7 +111,7 @@ export abstract class AbstractAttachmentQueue<T extends AttachmentQueueOptions =
   }
 
   async watchAttachmentIds() {
-    for await (const ids of this.attachmentIds()) {
+    this.onAttachmentIdsChange(async (ids) => {
       const _ids = `${ids.map((id) => `'${id}'`).join(',')}`;
       console.debug(`Queuing for sync, attachment IDs: [${_ids}]`);
 
@@ -157,7 +162,7 @@ export abstract class AbstractAttachmentQueue<T extends AttachmentQueueOptions =
           AND
             id NOT IN (${ids.map((id) => `'${id}'`).join(',')})`
       );
-    }
+    });
   }
 
   async saveToQueue(record: Omit<AttachmentRecord, 'timestamp'>): Promise<AttachmentRecord> {
@@ -342,8 +347,8 @@ export abstract class AbstractAttachmentQueue<T extends AttachmentQueueOptions =
     return false;
   }
 
-  async *idsToUpload(): AsyncIterable<string[]> {
-    for await (const result of this.powersync.watch(
+  idsToUpload(onResult: (ids: string[]) => void): void {
+    this.powersync.watch(
       `SELECT id
               FROM ${this.table}
               WHERE
@@ -352,18 +357,17 @@ export abstract class AbstractAttachmentQueue<T extends AttachmentQueueOptions =
                 (state = ${AttachmentState.QUEUED_UPLOAD}
               OR
                 state = ${AttachmentState.QUEUED_SYNC})`,
-      []
-    )) {
-      yield result.rows?._array.map((r) => r.id) || [];
-    }
+      [],
+      { onResult: (result) => onResult(result.rows?._array.map((r) => r.id) || []) }
+    );
   }
 
-  async watchUploads() {
-    for await (const ids of this.idsToUpload()) {
+  watchUploads() {
+    this.idsToUpload(async (ids) => {
       if (ids.length > 0) {
         await this.uploadRecords();
       }
-    }
+    })
   }
 
   /**
@@ -409,26 +413,25 @@ export abstract class AbstractAttachmentQueue<T extends AttachmentQueueOptions =
     return res.map((r) => r.id);
   }
 
-  async *idsToDownload(): AsyncIterable<string[]> {
-    for await (const result of this.powersync.watch(
+  idsToDownload(onResult: (ids: string[]) => void): void {
+    this.powersync.watch(
       `SELECT id
               FROM ${this.table}
               WHERE
                 state = ${AttachmentState.QUEUED_DOWNLOAD}
               OR
                 state = ${AttachmentState.QUEUED_SYNC}`,
-      []
-    )) {
-      yield result.rows?._array.map((r) => r.id) || [];
-    }
+      [],
+      { onResult: result => onResult(result.rows?._array.map(r => r.id) || []) }
+    )
   }
 
-  async watchDownloads() {
-    for await (const ids of this.idsToDownload()) {
+  watchDownloads() {
+    this.idsToDownload(async (ids) => {
       ids.map((id) => this.downloadQueue.add(id));
-      // No need to await this, the lock will ensure only loop is running at a time
+      // No need to await this, the lock will ensure only one loop is running at a time
       this.downloadRecords();
-    }
+    })
   }
 
   private async downloadRecords() {

packages/powersync-react/src/hooks/usePowerSyncWatchedQuery.ts

@@ -24,14 +24,15 @@ export const usePowerSyncWatchedQuery = <T = any>(
     // Abort any previous watches
     abortController.current?.abort();
     abortController.current = new AbortController();
-    (async () => {
-      for await (const result of powerSync.watch(sqlStatement, parameters, {
-        ...options,
-        signal: abortController.current.signal
-      })) {
-        setData(result.rows?._array ?? []);
-      }
-    })();
+
+    powerSync.watch(sqlStatement, parameters, {
+      onResult(results) {
+        setData(results.rows?._array ?? []);
+      },
+    }, {
+      ...options,
+      signal: abortController.current.signal
+    });
 
     return () => {
       abortController.current?.abort();