Simplify query options for watched queries

Author: stevensJourney

packages/common/src/client/watched/GetAllQuery.ts

@@ -0,0 +1,29 @@
+import { CompiledQuery } from '../../types/types.js';
+import { WatchCompatibleQuery, WatchExecuteOptions } from './WatchedQuery.js';
+
+/**
+ * Options for {@link GetAllQuery}.
+ */
+export type GetAllQueryOptions = {
+  sql: string;
+  parameters?: ReadonlyArray<unknown>;
+};
+
+/**
+ * Performs a {@link AbstractPowerSyncDatabase.getAll} operation for a watched query.
+ */
+export class GetAllQuery<RowType = unknown> implements WatchCompatibleQuery<RowType[]> {
+  constructor(protected options: GetAllQueryOptions) {}
+
+  compile(): CompiledQuery {
+    return {
+      sql: this.options.sql,
+      parameters: this.options.parameters ?? []
+    };
+  }
+
+  execute(options: WatchExecuteOptions): Promise<RowType[]> {
+    const { db, sql, parameters } = options;
+    return db.getAll<RowType>(sql, parameters);
+  }
+}

packages/common/src/client/watched/WatchedQuery.ts

@@ -1,5 +1,6 @@
 import { CompiledQuery } from '../../types/types.js';
 import { BaseListener, BaseObserverInterface } from '../../utils/BaseObserver.js';
+import { AbstractPowerSyncDatabase } from '../AbstractPowerSyncDatabase.js';
 
 export interface WatchedQueryState<Data> {
   /**
@@ -27,13 +28,12 @@ export interface WatchedQueryState<Data> {
 }
 
 /**
- * Similar to {@link CompiledQuery}, but used for watched queries.
- * The parameters are not read-only, as they can be modified. This is useful for compatibility with
- * PowerSync queries.
+ * Options provided to the `execute` method of a {@link WatchCompatibleQuery}.
  */
-export interface WatchCompiledQuery {
+export interface WatchExecuteOptions {
   sql: string;
   parameters: any[];
+  db: AbstractPowerSyncDatabase;
 }
 
 /**
@@ -43,7 +43,7 @@ export interface WatchCompiledQuery {
  * does not enforce an Array result type.
  */
 export interface WatchCompatibleQuery<ResultType> {
-  execute(compiled: WatchCompiledQuery): Promise<ResultType>;
+  execute(options: WatchExecuteOptions): Promise<ResultType>;
   compile(): CompiledQuery;
 }
 

packages/common/src/client/watched/processors/OnChangeQueryProcessor.ts

@@ -84,7 +84,8 @@ export class OnChangeQueryProcessor<Data> extends AbstractQueryProcessor<Data> {
               sql: compiledQuery.sql,
               // Allows casting from ReadOnlyArray[unknown] to Array<unknown>
               // This allows simpler compatibility with PowerSync queries
-              parameters: [...compiledQuery.parameters]
+              parameters: [...compiledQuery.parameters],
+              db: this.options.db
             });
 
             if (this.reportFetching) {

packages/common/src/index.ts

@@ -30,6 +30,7 @@ export * from './db/schema/Schema.js';
 export * from './db/schema/Table.js';
 export * from './db/schema/TableV2.js';
 
+export * from './client/watched/GetAllQuery.js';
 export * from './client/watched/processors/AbstractQueryProcessor.js';
 export * from './client/watched/processors/comparators.js';
 export * from './client/watched/WatchedQuery.js';

packages/react/src/WatchedQuery.ts

@@ -67,7 +67,8 @@ export const useSingleSuspenseQuery = <T = any>(
           const compiledQuery = parsedQuery.compile();
           const result = await parsedQuery.execute({
             sql: compiledQuery.sql,
-            parameters: [...compiledQuery.parameters]
+            parameters: [...compiledQuery.parameters],
+            db: powerSync
           });
           if (signal.aborted) {
             return; // Abort if the signal is already aborted

packages/react/src/hooks/suspense/useSingleSuspenseQuery.ts

@@ -19,7 +19,8 @@ export const useSingleQuery = <RowType = any>(options: InternalHookOptions<RowTy
         const compiledQuery = query.compile();
         const result = await query.execute({
           sql: compiledQuery.sql,
-          parameters: [...compiledQuery.parameters]
+          parameters: [...compiledQuery.parameters],
+          db: powerSync
         });
         if (signal.aborted) {
           return;

packages/react/src/hooks/watched/useSingleQuery.ts

@@ -1,4 +1,4 @@
-import { AbstractPowerSyncDatabase, WatchedQueryState } from '@powersync/common';
+import { AbstractPowerSyncDatabase, GetAllQuery, WatchedQueryState } from '@powersync/common';
 import { PowerSyncDatabase } from '@powersync/web';
 import { v4 as uuid } from 'uuid';
 import { afterEach, beforeEach, describe, expect, it, onTestFinished, vi } from 'vitest';
@@ -328,13 +328,10 @@ describe('Watch Tests', { sequential: true }, () => {
   it('should stream watch results', async () => {
     const watch = powersync.incrementalWatch({
       watch: {
-        query: {
-          compile: () => ({
-            sql: 'SELECT * FROM assets',
-            parameters: []
-          }),
-          execute: ({ sql, parameters }) => powersync.getAll(sql, parameters)
-        },
+        query: new GetAllQuery({
+          sql: 'SELECT * FROM assets',
+          parameters: []
+        }),
         placeholderData: []
       }
     });

packages/web/tests/watch.test.ts

@@ -50,7 +50,7 @@ const config: UserConfigExport = {
        */
       isolate: true,
       provider: 'playwright',
-      headless: true,
+      headless: false,
       instances: [
         {
           browser: 'chromium'