Merge pull request #328 from supabase/fix/realtime-subscription

fix: create subscription only when .on method is called

Author: w3b6x9

src/SupabaseClient.ts

@@ -131,12 +131,11 @@ export default class SupabaseClient {
   }
 
   /**
-   * Remove all active subscriptions.
+   * Remove all subscriptions.
    */
-  removeAllSubscriptions() {
-    this.realtime.channels.forEach((sub) => {
-      this.removeSubscription(sub)
-    })
+  async removeAllSubscriptions() {
+    const subscriptions = this.realtime.channels.slice()
+    return await Promise.allSettled(subscriptions.map((sub) => this.removeSubscription(sub)))
   }
 
   /**
@@ -149,12 +148,14 @@ export default class SupabaseClient {
       try {
         await this._closeSubscription(subscription)
 
-        const openSubscriptions = this.getSubscriptions().length
-        if (!openSubscriptions) {
+        const allSubscriptions = this.getSubscriptions()
+        const openSubscriptionsCount = allSubscriptions.filter((chan) => chan.isJoined()).length
+
+        if (!allSubscriptions.length) {
           const { error } = await this.realtime.disconnect()
           if (error) return resolve({ error })
         }
-        return resolve({ error: null, data: { openSubscriptions } })
+        return resolve({ error: null, data: { openSubscriptions: openSubscriptionsCount } })
       } catch (error) {
         return resolve({ error })
       }
@@ -165,6 +166,11 @@ export default class SupabaseClient {
     if (!subscription.isClosed()) {
       await this._closeChannel(subscription)
     }
+
+    return new Promise((resolve) => {
+      this.realtime.remove(subscription)
+      return resolve(true)
+    })
   }
 
   /**
@@ -225,7 +231,6 @@ export default class SupabaseClient {
       subscription
         .unsubscribe()
         .receive('ok', () => {
-          this.realtime.remove(subscription)
           return resolve(true)
         })
         .receive('error', (e: Error) => reject(e))

src/lib/SupabaseQueryBuilder.ts

@@ -4,8 +4,11 @@ import { RealtimeClient } from '@supabase/realtime-js'
 import { Fetch, SupabaseEventTypes, SupabaseRealtimePayload } from './types'
 
 export class SupabaseQueryBuilder<T> extends PostgrestQueryBuilder<T> {
-  private _subscription: SupabaseRealtimeClient
+  private _subscription: SupabaseRealtimeClient | null = null
   private _realtime: RealtimeClient
+  private _headers: { [key: string]: string }
+  private _schema: string
+  private _table: string
 
   constructor(
     url: string,
@@ -25,12 +28,14 @@ export class SupabaseQueryBuilder<T> extends PostgrestQueryBuilder<T> {
   ) {
     super(url, { headers, schema, fetch })
 
-    this._subscription = new SupabaseRealtimeClient(realtime, headers, schema, table)
     this._realtime = realtime
+    this._headers = headers
+    this._schema = schema
+    this._table = table
   }
 
   /**
-   * Subscribe to realtime changes in your databse.
+   * Subscribe to realtime changes in your database.
    * @param event The database event which you would like to receive updates for, or you can use the special wildcard `*` to listen to all changes.
    * @param callback A callback that will handle the payload that is sent whenever your database changes.
    */
@@ -41,6 +46,14 @@ export class SupabaseQueryBuilder<T> extends PostgrestQueryBuilder<T> {
     if (!this._realtime.isConnected()) {
       this._realtime.connect()
     }
+    if (!this._subscription) {
+      this._subscription = new SupabaseRealtimeClient(
+        this._realtime,
+        this._headers,
+        this._schema,
+        this._table
+      )
+    }
     return this._subscription.on(event, callback)
   }
 }