update unit tests

Author: stevensJourney

packages/common/rollup.config.mjs

@@ -2,9 +2,13 @@ import commonjs from '@rollup/plugin-commonjs';
 import inject from '@rollup/plugin-inject';
 import json from '@rollup/plugin-json';
 import nodeResolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
 
+/**
+ * @returns {import('rollup').RollupOptions}
+ */
 export default (commandLineArgs) => {
-  const sourcemap = (commandLineArgs.sourceMap || 'true') == 'true';
+  const sourceMap = (commandLineArgs.sourceMap || 'true') == 'true';
 
   // Clears rollup CLI warning https://github.com/rollup/rollup/issues/2694
   delete commandLineArgs.sourceMap;
@@ -14,7 +18,7 @@ export default (commandLineArgs) => {
     output: {
       file: 'dist/bundle.mjs',
       format: 'esm',
-      sourcemap: sourcemap
+      sourcemap: sourceMap
     },
     plugins: [
       json(),
@@ -25,8 +29,8 @@ export default (commandLineArgs) => {
         ReadableStream: ['web-streams-polyfill/ponyfill', 'ReadableStream'],
         // Used by can-ndjson-stream
         TextDecoder: ['text-encoding', 'TextDecoder']
-      })
-      // terser()
+      }),
+      terser({ sourceMap })
     ],
     // This makes life easier
     external: [

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

@@ -41,6 +41,7 @@ export abstract class AbstractQueryProcessor<Data = unknown[]>
   protected abortController: AbortController;
   protected initialized: Promise<void>;
   protected _closed: boolean;
+  protected disposeListeners: (() => void) | null;
 
   get closed() {
     return this._closed;
@@ -66,6 +67,7 @@ export abstract class AbstractQueryProcessor<Data = unknown[]>
       lastUpdated: null,
       data: options.watchOptions.placeholderData
     };
+    this.disposeListeners = null;
     this.initialized = this.init();
   }
 
@@ -97,6 +99,9 @@ export abstract class AbstractQueryProcessor<Data = unknown[]>
   protected async updateState(update: Partial<WatchedQueryState<Data>>) {
     if (typeof update.error !== 'undefined') {
       await this.iterateAsyncListenersWithError(async (l) => l.onError?.(update.error!));
+      // An error always stops for the current fetching state
+      update.isFetching = false;
+      update.isLoading = false;
     }
 
     if (typeof update.data !== 'undefined') {
@@ -113,19 +118,29 @@ export abstract class AbstractQueryProcessor<Data = unknown[]>
   protected async init() {
     const { db } = this.options;
 
-    db.registerListener({
+    const disposeCloseListener = db.registerListener({
+      closed: async () => {
+        this.close();
+      }
+    });
+
+    // Wait for the schema to be set before listening to changes
+    await db.waitForReady();
+    const disposeSchemaListener = db.registerListener({
       schemaChanged: async () => {
         await this.runWithReporting(async () => {
           await this.updateSettings(this.options.watchOptions);
         });
-      },
-      closing: () => {
-        this.close();
       }
     });
 
+    this.disposeListeners = () => {
+      disposeCloseListener();
+      disposeSchemaListener();
+    };
+
     // Initial setup
-    await this.runWithReporting(async () => {
+    this.runWithReporting(async () => {
       await this.updateSettings(this.options.watchOptions);
     });
   }
@@ -134,18 +149,19 @@ export abstract class AbstractQueryProcessor<Data = unknown[]>
     // hook in to subscription events in order to report changes
     const baseDispose = this.registerListener({ ...subscription });
 
-    const counts = this.subscriptionCounts;
-    this.iterateListeners((l) => l.subscriptionsChanged?.(counts));
+    this.iterateListeners((l) => l.subscriptionsChanged?.(this.subscriptionCounts));
 
     return () => {
       baseDispose();
-      this.iterateListeners((l) => l.subscriptionsChanged?.(counts));
+      this.iterateListeners((l) => l.subscriptionsChanged?.(this.subscriptionCounts));
     };
   }
 
   async close() {
     await this.initialized;
     this.abortController.abort();
+    this.disposeListeners?.();
+    this.disposeListeners = null;
     this._closed = true;
     this.iterateListeners((l) => l.closed?.());
   }

packages/react/src/QueryStore.ts

@@ -1,5 +1,5 @@
 import { AbstractPowerSyncDatabase, WatchCompatibleQuery, WatchedQuery } from '@powersync/common';
-import { AdditionalOptions } from './hooks/useQuery';
+import { AdditionalOptions } from './hooks/watched/watch-types';
 
 export function generateQueryKey(
   sqlStatement: string,

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

@@ -1,3 +1,3 @@
-import { QueryResult } from '../useQuery';
+import { QueryResult } from '../watched/watch-types';
 
 export type SuspenseQueryResult<T> = Pick<QueryResult<T>, 'data' | 'refresh'>;

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

@@ -38,13 +38,13 @@ export const useSingleSuspenseQuery = <T = any>(
   // Only use a temporary watched query if we don't have data yet.
   const watchedQuery = data ? null : (store.getQuery(key, parsedQuery, options) as WatchedQuery<T[]>);
   const { releaseHold } = useTemporaryHold(watchedQuery);
-
+  console.log('single watched query', !!watchedQuery);
   React.useEffect(() => {
     // Set the initial yielded data
     // it should be available once we commit the component
     if (watchedQuery?.state.error) {
       setError(watchedQuery.state.error);
-    } else if (watchedQuery?.state.data) {
+    } else if (watchedQuery?.state.isLoading === false) {
       setData(watchedQuery.state.data);
       setError(null);
     }
@@ -57,16 +57,18 @@ export const useSingleSuspenseQuery = <T = any>(
   if (error != null) {
     // Report errors - this is caught by an error boundary
     throw error;
-  } else if (data || watchedQuery?.state.data) {
+  } else if (data || watchedQuery?.state.isLoading === false) {
     // Happy path data return
     return {
       data: data ?? watchedQuery?.state.data ?? [],
       refresh: async (signal) => {
         try {
+          console.log('calling refresh for single query', key);
           const result = await parsedQuery.execute(parsedQuery.compile());
           if (signal.aborted) {
             return; // Abort if the signal is already aborted
           }
+          console.log('done with query refresh');
           setData(result);
           setError(null);
         } catch (e) {

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

@@ -55,7 +55,7 @@ export const useWatchedQuerySuspenseSubscription = <ResultType>(query: WatchedQu
     // Happy path data return
     return {
       data: query.state.data,
-      refresh: () => {
+      refresh: async () => {
         // no-op for watched queries
       }
     };

packages/react/src/hooks/watched/watch-utils.ts

@@ -1,4 +1,9 @@
-import { AbstractPowerSyncDatabase, CompilableQuery, WatchCompatibleQuery } from '@powersync/common';
+import {
+  AbstractPowerSyncDatabase,
+  CompilableQuery,
+  WatchCompatibleQuery,
+  WatchCompiledQuery
+} from '@powersync/common';
 import React from 'react';
 import { usePowerSync } from '../PowerSyncContext';
 import { AdditionalOptions } from './watch-types';
@@ -10,7 +15,14 @@ export type InternalHookOptions<DataType> = {
 };
 
 export const checkQueryChanged = <T>(query: WatchCompatibleQuery<T>, options: AdditionalOptions) => {
-  const compiled = query.compile();
+  let _compiled: WatchCompiledQuery;
+  try {
+    _compiled = query.compile();
+  } catch (error) {
+    return false; // If compilation fails, we assume the query has changed
+  }
+  const compiled = _compiled!;
+
   const stringifiedParams = JSON.stringify(compiled.parameters);
   const stringifiedOptions = JSON.stringify(options);
 

packages/react/src/index.ts

@@ -5,5 +5,6 @@ export * from './hooks/PowerSyncContext';
 export { SuspenseQueryResult } from './hooks/suspense/SuspenseQueryResult';
 export { useSuspenseQuery } from './hooks/suspense/useSuspenseQuery';
 export { useWatchedQuerySuspenseSubscription } from './hooks/suspense/useWatchedQuerySuspenseSubscription';
-export { useQuery } from './hooks/useQuery';
 export { useStatus } from './hooks/useStatus';
+export { useQuery } from './hooks/watched/useQuery';
+export { AdditionalOptions } from './hooks/watched/watch-types';

packages/react/tests/QueryStore.test.tsx

@@ -1,6 +1,7 @@
+import { AbstractPowerSyncDatabase, SQLWatchOptions } from '@powersync/common';
 import { beforeEach, describe, expect, it } from 'vitest';
 import { generateQueryKey, getQueryStore, QueryStore } from '../src/QueryStore';
-import { AbstractPowerSyncDatabase, SQLWatchOptions } from '@powersync/common';
+import { openPowerSync } from './useQuery.test';
 
 describe('QueryStore', () => {
   describe('generateQueryKey', () => {
@@ -46,7 +47,7 @@ describe('QueryStore', () => {
   let options: SQLWatchOptions;
 
   beforeEach(() => {
-    db = createMockDatabase();
+    db = openPowerSync();
     store = new QueryStore(db);
     query = {};
     options = {};

packages/react/tests/useQuery.test.tsx

@@ -1,11 +1,11 @@
+import React from 'react';
 import * as commonSdk from '@powersync/common';
 import { PowerSyncDatabase } from '@powersync/web';
 import { act, cleanup, renderHook, waitFor } from '@testing-library/react';
 import pDefer from 'p-defer';
 import { beforeEach, describe, expect, it, onTestFinished, vi } from 'vitest';
 import { PowerSyncContext } from '../src/hooks/PowerSyncContext';
-import { useQuery } from '../src/hooks/useQuery';
-
+import { useQuery } from '../src/hooks/watched/useQuery';
 export const openPowerSync = () => {
   const db = new PowerSyncDatabase({
     database: { dbFilename: 'test.db' },
@@ -128,8 +128,6 @@ describe('useQuery', () => {
       },
       { timeout: 500, interval: 100 }
     );
-
-    console.log('got to this point');
   });
 
   it('should accept compilable queries', async () => {