Add tests for shared queries

Author: stevensJourney

packages/react-native/rollup.config.mjs

@@ -12,7 +12,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 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;
@@ -22,7 +22,7 @@ export default (commandLineArgs) => {
     output: {
       file: 'dist/index.js',
       format: 'cjs',
-      sourcemap: sourcemap
+      sourcemap: sourceMap
     },
     plugins: [
       // We do this so that we can inject on BSON's crypto usage.
@@ -54,7 +54,7 @@ export default (commandLineArgs) => {
           }
         ]
       }),
-      terser()
+      terser({ sourceMap })
     ],
     external: [
       '@journeyapps/react-native-quick-sqlite',

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

@@ -45,7 +45,6 @@ export const useWatchedQuery = <RowType = unknown>(
   // Used when `isFetching` hasn't been set to true yet due to React execution.
   React.useEffect(() => {
     if (queryChanged) {
-      console.log('Query changed, re-fetching...');
       watchedQuery.updateSettings({
         placeholderData: [],
         query,

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

@@ -0,0 +1,36 @@
+import { WatchedQuery, WatchedQueryState } from '@powersync/common';
+import React from 'react';
+
+/**
+ * A hook to access and subscribe to the results of an existing {@link WatchedQuery} instance.
+ * @example
+ * export const ContentComponent = () => {
+ * const { data: lists }  = useWatchedQuerySuspenseSubscription(listsQuery);
+ *
+ * return <View>
+ *   {lists.map((l) => (
+ *     <Text key={l.id}>{JSON.stringify(l)}</Text>
+ *   ))}
+ * </View>;
+ * }
+ *
+ */
+export const useWatchedQuerySubscription = <ResultType = unknown>(
+  query: WatchedQuery<ResultType>
+): WatchedQueryState<ResultType> => {
+  const [output, setOutputState] = React.useState(query.state);
+
+  React.useEffect(() => {
+    const dispose = query.subscribe({
+      onStateChange: (state) => {
+        setOutputState({ ...state });
+      }
+    });
+
+    return () => {
+      dispose();
+    };
+  }, [query]);
+
+  return output;
+};

packages/react/src/index.ts

@@ -7,4 +7,5 @@ export { useSuspenseQuery } from './hooks/suspense/useSuspenseQuery';
 export { useWatchedQuerySuspenseSubscription } from './hooks/suspense/useWatchedQuerySuspenseSubscription';
 export { useStatus } from './hooks/useStatus';
 export { useQuery } from './hooks/watched/useQuery';
+export { useWatchedQuerySubscription } from './hooks/watched/useWatchedQuerySubscription';
 export { AdditionalOptions } from './hooks/watched/watch-types';

packages/react/tests/useQuery.test.tsx

@@ -6,6 +6,7 @@ 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/watched/useQuery';
+import { useWatchedQuerySubscription } from '../src/hooks/watched/useWatchedQuerySubscription';
 export const openPowerSync = () => {
   const db = new PowerSyncDatabase({
     database: { dbFilename: 'test.db' },
@@ -224,7 +225,7 @@ describe('useQuery', () => {
     const deferred = pDefer();
 
     const baseGetAll = db.getAll;
-    const getSpy = vi.spyOn(db, 'getAll').mockImplementation(async (sql, params) => {
+    vi.spyOn(db, 'getAll').mockImplementation(async (sql, params) => {
       // Allow pausing this call in order to test isFetching
       await deferred.promise;
       return baseGetAll.call(db, sql, params);
@@ -255,5 +256,56 @@ describe('useQuery', () => {
     expect(data == result.current.data).toEqual(true);
   });
 
+  it('should use an existing WatchedQuery instance', async () => {
+    const db = openPowerSync();
+
+    // This query can be instantiated once and reused.
+    // The query retains it's state and will not re-fetch the data unless the result changes.
+    // This is useful for queries that are used in multiple components.
+    const listsQuery = db.incrementalWatch({
+      watch: {
+        placeholderData: [],
+        query: {
+          compile: () => ({
+            sql: `SELECT * FROM lists`,
+            parameters: []
+          }),
+          execute: ({ sql, parameters }) => db.getAll(sql, parameters)
+        }
+      }
+    });
+
+    const wrapper = ({ children }) => <PowerSyncContext.Provider value={db}>{children}</PowerSyncContext.Provider>;
+    const { result } = renderHook(() => useWatchedQuerySubscription(listsQuery), {
+      wrapper
+    });
+
+    expect(result.current.isLoading).toEqual(true);
+
+    await waitFor(
+      async () => {
+        const { current } = result;
+        expect(current.isLoading).toEqual(false);
+      },
+      { timeout: 500, interval: 100 }
+    );
+
+    // This should trigger an update
+    await db.execute('INSERT INTO lists(id, name) VALUES (uuid(), ?)', ['aname']);
+
+    await waitFor(
+      async () => {
+        const { current } = result;
+        expect(current.data.length).toEqual(1);
+      },
+      { timeout: 500, interval: 100 }
+    );
+
+    // now use the same query again, the result should be available immediately
+    const { result: newResult } = renderHook(() => useWatchedQuerySubscription(listsQuery), { wrapper });
+    expect(newResult.current.isLoading).toEqual(false);
+    expect(newResult.current.data.length).toEqual(1);
+  });
+
   // TODO: Add tests for powersync.onChangeWithCallback path
 });

packages/react/tests/useSuspenseQuery.test.tsx

@@ -5,6 +5,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { PowerSyncContext } from '../src/hooks/PowerSyncContext';
 import { useSuspenseQuery } from '../src/hooks/suspense/useSuspenseQuery';
+import { useWatchedQuerySuspenseSubscription } from '../src/hooks/suspense/useWatchedQuerySuspenseSubscription';
 import { openPowerSync } from './useQuery.test';
 
 describe('useSuspenseQuery', () => {
@@ -242,4 +243,57 @@ describe('useSuspenseQuery', () => {
     await waitForCompletedSuspend();
     await waitForError();
   });
+
+  it('should use an existing WatchedQuery instance', async () => {
+    const db = openPowerSync();
+
+    // This query can be instantiated once and reused.
+    // The query retains it's state and will not re-fetch the data unless the result changes.
+    // This is useful for queries that are used in multiple components.
+    const listsQuery = db.incrementalWatch({
+      watch: {
+        placeholderData: [],
+        query: {
+          compile: () => ({
+            sql: `SELECT * FROM lists`,
+            parameters: []
+          }),
+          execute: ({ sql, parameters }) => db.getAll(sql, parameters)
+        }
+      }
+    });
+
+    const wrapper = ({ children }) => <PowerSyncContext.Provider value={db}>{children}</PowerSyncContext.Provider>;
+    const { result } = renderHook(() => useWatchedQuerySuspenseSubscription(listsQuery), {
+      wrapper
+    });
+
+    // Initially, the query should be loading/suspended
+    expect(result.current).toEqual(null);
+
+    await waitFor(
+      async () => {
+        expect(result.current).not.null;
+      },
+      { timeout: 500, interval: 100 }
+    );
+
+    expect(result.current.data.length).toEqual(0);
+
+    // This should trigger an update
+    await db.execute('INSERT INTO lists(id, name) VALUES (uuid(), ?)', ['aname']);
+
+    await waitFor(
+      async () => {
+        const { current } = result;
+        expect(current.data.length).toEqual(1);
+      },
+      { timeout: 500, interval: 100 }
+    );
+
+    // now use the same query again, the result should be available immediately
+    const { result: newResult } = renderHook(() => useWatchedQuerySuspenseSubscription(listsQuery), { wrapper });
+    expect(newResult.current).not.null;
+    expect(newResult.current.data.length).toEqual(1);
+  });
 });