Fix: logic in onMount for realtime.

src/lib/components/backupRestoreBox.svelte

@@ -125,20 +125,18 @@
 
     onMount(() => {
         // fast path: don't subscribe if org is on a free plan or is self-hosted.
-        if (isSelfHosted || (isCloud && $organization.billingPlan === BillingPlan.FREE)) return;
-
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe('console', (response) => {
-                if (!response.channels.includes(`projects.${getProjectId()}`)) return;
-
-                if (
-                    response.events.includes('archives.*') ||
-                    response.events.includes('restorations.*')
-                ) {
-                    updateOrAddItem(response.payload);
-                }
-            });
+        if (isSelfHosted || (isCloud && $organization?.billingPlan === BillingPlan.FREE)) return;
+
+        return realtime.forProject(page.params.region, 'console', (response) => {
+            if (!response.channels.includes(`projects.${getProjectId()}`)) return;
+
+            if (
+                response.events.includes('archives.*') ||
+                response.events.includes('restorations.*')
+            ) {
+                updateOrAddItem(response.payload);
+            }
+        });
     });
 </script>
 

src/lib/components/csvImportBox.svelte

@@ -2,8 +2,8 @@
     import { onMount } from 'svelte';
     import { base } from '$app/paths';
     import { page } from '$app/state';
-    import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
+    import { realtime, sdk } from '$lib/stores/sdk';
     import { goto, invalidate } from '$app/navigation';
     import { getProjectId } from '$lib/helpers/project';
     import { addNotification } from '$lib/stores/notifications';
@@ -187,7 +187,7 @@
                 migrations.migrations.forEach(updateOrAddItem);
             });
 
-        return sdk.forConsoleIn(page.params.region).realtime.subscribe('console', (response) => {
+        return realtime.forConsole(page.params.region, 'console', (response) => {
             if (!response.channels.includes(`projects.${getProjectId()}`)) return;
             if (response.events.includes('migrations.*')) {
                 updateOrAddItem(response.payload as Payload);

src/lib/components/migrationBox.svelte

@@ -50,15 +50,14 @@
     })();
 
     onMount(() => {
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe<Models.Migration>(['console'], async (response) => {
-                if (!response.channels.includes(`projects.${getProjectId()}`)) return;
-                if (response.events.includes('migrations.*')) {
-                    if (response.payload.source === 'Backup') return;
-                    migration = response.payload;
-                }
-            });
+        return realtime.forProject(page.params.region, ['console'], async (response) => {
+            if (!response.channels.includes(`projects.${getProjectId()}`)) return;
+            if (response.events.includes('migrations.*')) {
+                const payload = response.payload as Models.Migration;
+                if (payload.source === 'Backup') return;
+                migration = payload;
+            }
+        });
     });
 </script>
 

src/lib/stores/sdk.ts

@@ -42,7 +42,6 @@ import {
     SUBDOMAIN_TOR
 } from '$lib/constants';
 import { building } from '$app/environment';
-import { getProjectId } from '$lib/helpers/project';
 
 export function getApiEndpoint(region?: string): string {
     if (building) return '';
@@ -141,12 +140,32 @@ const sdkForProject = {
 };
 
 export const realtime = {
-    forProject(region: string, _projectId: string) {
+    forProject(
+        region: string,
+        channels: string | string[],
+        callback: AppwriteRealtimeResponseEvent
+    ) {
         const endpoint = getApiEndpoint(region);
         if (endpoint !== clientRealtime.config.endpoint) {
             clientRealtime.setEndpoint(endpoint);
         }
-        return clientRealtime;
+
+        // because uses a different client!
+        const realtime = new Realtime(clientRealtime);
+
+        return createRealtimeSubscription(realtime, channels, callback);
+    },
+
+    forConsole(
+        region: string,
+        channels: string | string[],
+        callback: AppwriteRealtimeResponseEvent
+    ): () => void {
+        const realtimeInstance = region
+            ? sdk.forConsoleIn(region).realtime
+            : sdk.forConsole.realtime;
+
+        return createRealtimeSubscription(realtimeInstance, channels, callback);
     }
 };
 
@@ -176,8 +195,8 @@ export const sdk = {
 };
 
 export enum RuleType {
-    DEPLOYMENT = 'deployment',
     API = 'api',
+    DEPLOYMENT = 'deployment',
     REDIRECT = 'redirect'
 }
 
@@ -191,11 +210,24 @@ export enum RuleTrigger {
     MANUAL = 'manual'
 }
 
-/**
- * Some type imports are broken on the SDK, this works correctly for the time being!
- */
-export type AppwriteRealtimeSubscription = Awaited<ReturnType<Realtime['subscribe']>>;
-
-export const createAdminClient = () => {
-    return new Client().setEndpoint(getApiEndpoint()).setMode('admin').setProject(getProjectId());
+export type RealtimeResponse = {
+    events: string[];
+    channels: string[];
+    timestamp: string;
+    payload: unknown;
 };
+
+export type AppwriteRealtimeResponseEvent = (response: RealtimeResponse) => void;
+
+function createRealtimeSubscription(
+    realtimeInstance: Realtime,
+    channels: string | string[],
+    callback: AppwriteRealtimeResponseEvent
+): () => void {
+    const channelsArray = Array.isArray(channels) ? channels : [channels];
+    const subscriptionPromise = realtimeInstance.subscribe(channelsArray, callback);
+
+    return () => {
+        subscriptionPromise.then((sub) => sub.close());
+    };
+}

src/routes/(console)/project-[region]-[project]/+layout.svelte

@@ -27,15 +27,13 @@
     import CsvImportBox from '$lib/components/csvImportBox.svelte';
 
     onMount(() => {
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe(['project', 'console'], (response) => {
-                if (response.events.includes('stats.connections')) {
-                    for (const [projectId, value] of Object.entries(response.payload)) {
-                        stats.add(projectId, [new Date(response.timestamp).toISOString(), value]);
-                    }
+        return realtime.forProject(page.params.region, ['project', 'console'], (response) => {
+            if (response.events.includes('stats.connections')) {
+                for (const [projectId, value] of Object.entries(response.payload)) {
+                    stats.add(projectId, [new Date(response.timestamp).toISOString(), value]);
                 }
-            });
+            }
+        });
     });
 
     $: $registerCommands([

src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte

@@ -161,19 +161,14 @@
     };
 
     onMount(() => {
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe(['project', 'console'], (response) => {
-                // fast path return.
-                if (!response.channels.includes(`projects.${getProjectId()}`)) return;
-
-                if (
-                    response.events.includes('archives.*') ||
-                    response.events.includes('policies.*')
-                ) {
-                    invalidate(Dependencies.BACKUPS);
-                }
-            });
+        return realtime.forProject(page.params.region, ['project', 'console'], (response) => {
+            // fast path return.
+            if (!response.channels.includes(`projects.${getProjectId()}`)) return;
+
+            if (response.events.includes('archives.*') || response.events.includes('policies.*')) {
+                invalidate(Dependencies.BACKUPS);
+            }
+        });
     });
 </script>
 

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte

@@ -20,7 +20,7 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { realtime, sdk } from '$lib/stores/sdk';
+    import { type RealtimeResponse, realtime, sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import {
         table,
@@ -66,7 +66,6 @@
 
     import IndexesSuggestions from '../(suggestions)/indexes.svelte';
     import { showIndexesSuggestions, tableColumnSuggestions } from '../(suggestions)';
-    import type { RealtimeResponseEvent } from '@appwrite.io/console';
 
     let editRow: EditRow;
     let editRelatedRow: EditRelatedRow;
@@ -83,35 +82,33 @@
      */
     let isWaterfallFromFaker = false;
 
-    let columnCreationHandler: ((response: RealtimeResponseEvent<unknown>) => void) | null = null;
+    let columnCreationHandler: ((response: RealtimeResponse) => void) | null = null;
 
     onMount(() => {
         expandTabs.set(preferences.getKey('tableHeaderExpanded', true));
 
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe(['project', 'console'], (response) => {
+        return realtime.forProject(page.params.region, ['project', 'console'], (response) => {
+            if (
+                response.events.includes('databases.*.tables.*.columns.*') ||
+                response.events.includes('databases.*.tables.*.indexes.*')
+            ) {
+                if (isWaterfallFromFaker) {
+                    columnCreationHandler?.(response);
+                }
+
+                // don't invalidate when -
+                // 1. from faker
+                // 2. ai columns creation
+                // 3. ai indexes creation
                 if (
-                    response.events.includes('databases.*.tables.*.columns.*') ||
-                    response.events.includes('databases.*.tables.*.indexes.*')
+                    !isWaterfallFromFaker &&
+                    !$showIndexesSuggestions &&
+                    !$tableColumnSuggestions.table
                 ) {
-                    if (isWaterfallFromFaker) {
-                        columnCreationHandler?.(response);
-                    }
-
-                    // don't invalidate when -
-                    // 1. from faker
-                    // 2. ai columns creation
-                    // 3. ai indexes creation
-                    if (
-                        !isWaterfallFromFaker &&
-                        !$showIndexesSuggestions &&
-                        !$tableColumnSuggestions.table
-                    ) {
-                        invalidate(Dependencies.TABLE);
-                    }
+                    invalidate(Dependencies.TABLE);
                 }
-            });
+            }
+        });
     });
 
     // TODO: use route ids instead of pathname
@@ -268,7 +265,7 @@
         const availableColumns = new Set<string>();
         const waitPromise = new Promise<void>((resolve) => (resolvePromise = resolve));
 
-        columnCreationHandler = (response) => {
+        columnCreationHandler = (response: RealtimeResponse) => {
             const { events, payload } = response;
 
             if (

src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.svelte

@@ -21,30 +21,29 @@
 
     onMount(() => {
         let previousStatus = null;
-        return realtime
-            .forProject(page.params.region, page.params.project)
-            .subscribe<Models.Deployment>('console', (message) => {
-                if (
-                    message.payload.status !== 'ready' &&
-                    previousStatus === message.payload.status
-                ) {
-                    return;
-                }
-                previousStatus = message.payload.status;
-                if (message.events.includes('functions.*.deployments.*.create')) {
-                    invalidate(Dependencies.DEPLOYMENTS);
-                    return;
-                }
-                if (message.events.includes('functions.*.deployments.*.update')) {
-                    invalidate(Dependencies.DEPLOYMENTS);
-                    invalidate(Dependencies.FUNCTION);
-                    return;
-                }
-                if (message.events.includes('functions.*.deployments.*.delete')) {
-                    invalidate(Dependencies.DEPLOYMENTS);
-                    return;
-                }
-            });
+        return realtime.forProject(page.params.region, 'console', (response) => {
+            const payload = response.payload as Models.Deployment;
+            if (payload.status !== 'ready' && previousStatus === payload.status) {
+                return;
+            }
+
+            previousStatus = payload.status;
+            if (response.events.includes('functions.*.deployments.*.create')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+                return;
+            }
+
+            if (response.events.includes('functions.*.deployments.*.update')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+                invalidate(Dependencies.FUNCTION);
+                return;
+            }
+
+            if (response.events.includes('functions.*.deployments.*.delete')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+                return;
+            }
+        });
     });
 
     $: $registerCommands([

src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
+    import { realtime } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { type Models } from '@appwrite.io/console';
     import { page } from '$app/state';
@@ -44,24 +44,18 @@
     let showRedeploy = false;
 
     onMount(() => {
-        const unsubscribe = sdk.forConsole.client.subscribe<Models.Deployment>(
-            'console',
-            (message) => {
-                if (
-                    message.events.includes(
-                        `functions.${page.params.function}.deployments.${page.params.deployment}.update`
-                    )
-                ) {
-                    if (message.payload.status === 'ready') {
-                        invalidate(Dependencies.DEPLOYMENT);
-                    }
+        return realtime.forProject(page.params.region, 'console', (response) => {
+            if (
+                response.events.includes(
+                    `functions.${page.params.function}.deployments.${page.params.deployment}.update`
+                )
+            ) {
+                const payload = response.payload as Models.Deployment;
+                if (payload.status === 'ready') {
+                    invalidate(Dependencies.DEPLOYMENT);
                 }
             }
-        );
-
-        return () => {
-            unsubscribe();
-        };
+        });
     });
 
     export function badgeTypeDeployment(status: string) {