useQuery will recalculate dependant tables if schema changes. Fixed auth flow issue in optional sync demo.

Author: Chriztiaan

demos/react-supabase-todolist-optional-sync/src/app/views/layout.tsx

@@ -58,7 +58,7 @@ export default function ViewsLayout({ children }: { children: React.ReactNode })
         beforeNavigate: async () => {
           // If user is logged in, sign out and stay on the current page
           if (supabase?.currentSession) {
-            await supabase?.client.auth.signOut();
+            await supabase?.logout();
             await powerSync.disconnectAndClear();
             setSyncEnabled(powerSync.database.name, false);
 

demos/react-supabase-todolist-optional-sync/src/library/powersync/SupabaseConnector.ts

@@ -93,6 +93,11 @@ export class SupabaseConnector extends BaseObserver<SupabaseConnectorListener> i
     this.updateSession(session);
   }
 
+  async logout() {
+    await this.client.auth.signOut();
+    this.updateSession(null);
+  }
+
   async fetchCredentials() {
     const {
       data: { session },

packages/react/src/hooks/useQuery.ts

@@ -118,10 +118,18 @@ export const useQuery = <T = any>(
   };
 
   React.useEffect(() => {
-    (async () => {
+    const updateData = async () => {
       await fetchTables();
       await fetchData();
-    })();
+    };
+
+    updateData();
+
+    const l = powerSync.registerListener({
+      schemaChanged: updateData
+    });
+
+    return () => l?.();
   }, [powerSync, memoizedParams, sqlStatement]);
 
   React.useEffect(() => {

packages/web/tests/watchSchemaChange.test.ts

@@ -2,7 +2,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { v4 as uuid } from 'uuid';
 import { AbstractPowerSyncDatabase, QueryResult } from '@powersync/common';
 import { PowerSyncDatabase } from '@powersync/web';
-import { testSchema } from './utils/testDb';
 import { makeOptionalSyncSchema } from './utils/optionalSyncTestSchema';
 vi.useRealTimers();