feat: pass along realtime-js options (#216)

* Pass along realtime-js options

* Update src/lib/types.ts

* Feedback adjustment

* Bump realtime-js

* Adjust for upstream changes

Author: quicksnap

package-lock.json

@@ -38,7 +38,7 @@
   "dependencies": {
     "@supabase/gotrue-js": "^1.16.6",
     "@supabase/postgrest-js": "^0.33.0",
-    "@supabase/realtime-js": "^1.0.11",
+    "@supabase/realtime-js": "^1.1.1",
     "@supabase/storage-js": "^1.2.2"
   },
   "devDependencies": {

package.json

@@ -4,7 +4,7 @@ import { SupabaseAuthClient } from './lib/SupabaseAuthClient'
 import { SupabaseQueryBuilder } from './lib/SupabaseQueryBuilder'
 import { SupabaseStorageClient } from '@supabase/storage-js'
 import { PostgrestClient } from '@supabase/postgrest-js'
-import { RealtimeClient, RealtimeSubscription } from '@supabase/realtime-js'
+import { RealtimeClient, RealtimeSubscription, RealtimeClientOptions } from '@supabase/realtime-js'
 
 const DEFAULT_OPTIONS = {
   schema: 'public',
@@ -42,6 +42,7 @@ export default class SupabaseClient {
    * @param options.persistSession Set to "true" if you want to automatically save the user session into local storage.
    * @param options.detectSessionInUrl Set to "true" if you want to automatically detects OAuth grants in the URL and signs in the user.
    * @param options.headers Any additional headers to send with each network request.
+   * @param options.realtime Options passed along to realtime-js constructor.
    */
   constructor(
     protected supabaseUrl: string,
@@ -59,7 +60,7 @@ export default class SupabaseClient {
     this.schema = settings.schema
 
     this.auth = this._initSupabaseAuthClient(settings)
-    this.realtime = this._initRealtimeClient()
+    this.realtime = this._initRealtimeClient(settings.realtime)
 
     // In the future we might allow the user to pass in a logger to receive these events.
     // this.realtime.onOpen(() => console.log('OPEN'))
@@ -154,9 +155,10 @@ export default class SupabaseClient {
     })
   }
 
-  private _initRealtimeClient() {
+  private _initRealtimeClient(options?: RealtimeClientOptions) {
     return new RealtimeClient(this.realtimeUrl, {
-      params: { apikey: this.supabaseKey },
+      ...options,
+      params: { ...options?.params, apikey: this.supabaseKey },
     })
   }
 

src/SupabaseClient.ts

@@ -1,3 +1,5 @@
+import { RealtimeClientOptions } from '@supabase/realtime-js'
+
 export type SupabaseClientOptions = {
   /**
    * The Postgres schema which your tables belong to. Must be on the list of exposed schemas in Supabase. Defaults to 'public'.
@@ -23,6 +25,11 @@ export type SupabaseClientOptions = {
    * A storage provider. Used to store the logged in session.
    */
   localStorage?: Storage
+
+  /**
+   * Options passed to the realtime-js instance
+   */
+  realtime?: RealtimeClientOptions
 }
 
 export type SupabaseRealtimePayload<T> = {