Vue queries will recalculate dependent tables on schema change.

Author: Chriztiaan

.changeset/ten-birds-camp.md

@@ -0,0 +1,5 @@
+---
+'@powersync/vue': patch
+---
+
+Queries will recalculate dependent tables if schema is updated.

packages/vue/src/composables/useQuery.ts

@@ -1,4 +1,10 @@
-import { type CompilableQuery, ParsedQuery, type SQLWatchOptions, parseQuery } from '@powersync/common';
+import {
+  type CompilableQuery,
+  ParsedQuery,
+  type SQLWatchOptions,
+  parseQuery,
+  runOnSchemaChange
+} from '@powersync/common';
 import { type MaybeRef, type Ref, ref, toValue, watchEffect } from 'vue';
 import { usePowerSync } from './powerSync';
 
@@ -114,38 +120,41 @@ export const useQuery = <T = any>(
     }
 
     const { sqlStatement: sql, parameters } = parsedQuery;
+    const watchQuery = async (abortSignal: AbortSignal) => {
+      let resolvedTables = [];
+      try {
+        resolvedTables = await powerSync.value.resolveTables(sql, parameters, options);
+      } catch (e) {
+        console.error('Failed to fetch tables:', e);
+        handleError(e);
+        return;
+      }
+      // Fetch initial data
+      const executor =
+        typeof queryValue == 'string' ? () => powerSync.value.getAll<T>(sql, parameters) : () => queryValue.execute();
+      fetchData = () => _fetchData(executor);
+      await fetchData();
+
+      if (options.runQueryOnce) {
+        return;
+      }
 
-    let resolvedTables = [];
-    try {
-      resolvedTables = await powerSync.value.resolveTables(sql, parameters, options);
-    } catch (e) {
-      console.error('Failed to fetch tables:', e);
-      handleError(e);
-      return;
-    }
-    // Fetch initial data
-    const executor =
-      typeof queryValue == 'string' ? () => powerSync.value.getAll<T>(sql, parameters) : () => queryValue.execute();
-    fetchData = () => _fetchData(executor);
-    await fetchData();
-
-    if (options.runQueryOnce) {
-      return;
-    }
-
-    powerSync.value.onChangeWithCallback(
-      {
-        onChange: async () => {
-          await fetchData();
+      powerSync.value.onChangeWithCallback(
+        {
+          onChange: async () => {
+            await fetchData();
+          },
+          onError: handleError
         },
-        onError: handleError
-      },
-      {
-        ...options,
-        signal: abortController.signal,
-        tables: resolvedTables
-      }
-    );
+        {
+          ...options,
+          signal: abortSignal,
+          tables: resolvedTables
+        }
+      );
+    };
+
+    runOnSchemaChange(watchQuery, powerSync.value, { signal: abortController.signal });
   });
 
   return {

packages/vue/tests/useQuery.test.ts

@@ -7,9 +7,7 @@ import { withSetup } from './utils';
 
 const mockPowerSync = {
   currentStatus: { status: 'initial' },
-  registerListener: vi.fn(() => ({
-    statusChanged: vi.fn(() => 'updated')
-  })),
+  registerListener: vi.fn(() => {}),
   resolveTables: vi.fn(),
   watch: vi.fn(),
   onChangeWithCallback: vi.fn(),
@@ -33,13 +31,11 @@ describe('useQuery', () => {
   });
 
   it('should handle error in watchEffect', async () => {
-    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref({}) as any);
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(undefined);
 
     const [{ data, isLoading, isFetching, error }] = withSetup(() => useQuery('SELECT * from lists'));
 
-    expect(error.value).toEqual(
-      Error('PowerSync failed to fetch data: powerSync.value.resolveTables is not a function')
-    );
+    expect(error.value).toEqual(Error('PowerSync not configured.'));
     expect(isFetching.value).toEqual(false);
     expect(isLoading.value).toEqual(false);
     expect(data.value).toEqual([]);