Diagnostics app reconnect (#624)

Author: rkistner

.changeset/silent-lions-cough.md

@@ -0,0 +1,5 @@
+---
+'@powersync/diagnostics-app': patch
+---
+
+Fix reconnecting after changing credentials.

tools/diagnostics-app/src/app/views/layout.tsx

@@ -43,7 +43,7 @@ export default function ViewsLayout({ children }: { children: React.ReactNode })
   const powerSync = usePowerSync();
   const navigate = useNavigate();
 
-  const [syncStatus, setSyncStatus] = React.useState(sync.syncStatus);
+  const [syncStatus, setSyncStatus] = React.useState(sync?.syncStatus);
   const [syncError, setSyncError] = React.useState<Error | null>(null);
   const { title } = useNavigationPanel();
 
@@ -101,13 +101,13 @@ export default function ViewsLayout({ children }: { children: React.ReactNode })
 
   // Cannot use `useStatus()`, since we're not using the default sync implementation.
   React.useEffect(() => {
-    const l = sync.registerListener({
+    const l = sync?.registerListener({
       statusChanged: (status) => {
         setSyncStatus(status);
         setSyncError(status.dataFlowStatus.downloadError ?? null);
       }
     });
-    return () => l();
+    return () => l?.();
   }, []);
 
   const drawerWidth = 320;

tools/diagnostics-app/src/app/views/sync-diagnostics.tsx

@@ -82,7 +82,7 @@ export default function SyncDiagnosticsPage() {
     // Similar to db.currentState.hasSynced, but synchronized to the onChange events
     const { synced_at } = await db.get<{ synced_at: string | null }>('SELECT powersync_last_synced_at() as synced_at');
     setlastSyncedAt(synced_at ? new Date(synced_at + 'Z') : null);
-    if (synced_at != null && !sync.syncStatus.dataFlowStatus.downloading) {
+    if (synced_at != null && !sync?.syncStatus.dataFlowStatus.downloading) {
       // These are potentially expensive queries - do not run during initial sync
       const bucketRows = await db.getAll(BUCKETS_QUERY);
       const tableRows = await db.getAll(TABLES_QUERY);

tools/diagnostics-app/src/library/powersync/ConnectionManager.ts

@@ -44,18 +44,9 @@ export const db = new PowerSyncDatabase({
 
 export const connector = new TokenConnector();
 
-const remote = new WebRemote(connector);
 const adapter = new RecordingStorageAdapter(db.database, schemaManager);
 
-const syncOptions: WebStreamingSyncImplementationOptions = {
-  adapter,
-  remote,
-  uploadCrud: async () => {
-    // No-op
-  },
-  identifier: 'diagnostics'
-};
-export const sync = new WebStreamingSyncImplementation(syncOptions);
+export let sync: WebStreamingSyncImplementation | undefined;
 
 export interface SyncErrorListener extends BaseListener {
   lastErrorUpdated?: ((error: Error) => void) | undefined;
@@ -67,28 +58,39 @@ if (connector.hasCredentials()) {
 
 export async function connect() {
   const params = getParams();
+  await sync?.disconnect();
+  const remote = new WebRemote(connector);
+  const syncOptions: WebStreamingSyncImplementationOptions = {
+    adapter,
+    remote,
+    uploadCrud: async () => {
+      // No-op
+    },
+    identifier: 'diagnostics'
+  };
+  sync = new WebStreamingSyncImplementation(syncOptions);
   await sync.connect({ params });
   if (!sync.syncStatus.connected) {
     const error = sync.syncStatus.dataFlowStatus.downloadError ?? new Error('Failed to connect');
     // Disconnect but don't wait for it
-    sync.disconnect();
+    await sync.disconnect();
     throw error;
   }
 }
 
 export async function clearData() {
-  await sync.disconnect();
+  await sync?.disconnect();
   await db.disconnectAndClear();
   await schemaManager.clear();
   await schemaManager.refreshSchema(db.database);
   if (connector.hasCredentials()) {
     const params = getParams();
-    await sync.connect({ params });
+    await sync?.connect({ params });
   }
 }
 
 export async function disconnect() {
-  await sync.disconnect();
+  await sync?.disconnect();
 }
 
 export async function signOut() {