feat: reduce Realtime footprint to four helper methods

Author: w3b6x9

example/next-storage/README.md

@@ -37,9 +37,8 @@ create policy "Users can update own profile."
 -- Set up Realtime!
 begin;
   drop publication if exists supabase_realtime;
-  create publication supabase_realtime;
+  create publication supabase_realtime for table profiles;
 commit;
-alter publication supabase_realtime add table profiles;
 
 -- Set up Storage!
 insert into storage.buckets (id, name)

example/next-storage/components/ProfileList.tsx

@@ -1,6 +1,5 @@
 import ProfileCard from '../components/ProfileCard'
 import { Profile } from '../lib/constants'
-import { SupabaseRealtimePayload } from '@supabase/supabase-js'
 import { supabase } from '../lib/api'
 import { useState, useEffect } from 'react'
 
@@ -14,9 +13,9 @@ export default function ProfileList() {
     const realtimeProfiles = supabase
       .channel('profiles-channel')
       .on(
-        'realtime',
+        'postgres_changes',
         { event: '*', schema: 'public', table: 'profiles' },
-        (payload: SupabaseRealtimePayload<Profile>) => profileUpdated(profiles, payload.new)
+        (payload: { [key: string]: any }) => profileUpdated(profiles, payload.new)
       )
       .subscribe()
 

example/next-todo/components/TodoList.js

@@ -14,20 +14,20 @@ export default function Todos({ user }) {
 
     subscription1 = supabase
       .channel('todos-table-channel')
-      .on('realtime', { event: 'UPDATE', schema: 'public', table: 'todos' }, (v) =>
+      .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'todos' }, (v) =>
         console.log('UPDATE on todos', v)
       )
-      .on('realtime', { event: 'INSERT', schema: 'public', table: 'todos' }, (v) =>
+      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'todos' }, (v) =>
         console.log('INSERT on todos', v)
       )
       .subscribe((change) => console.log('todos changed', change))
 
     subscription2 = supabase
       .channel('public-schema-channel')
-      .on('realtime', { event: 'UPDATE', schema: 'public' }, (v) =>
+      .on('postgres_changes', { event: 'UPDATE', schema: 'public' }, (v) =>
         console.log('UPDATE on schema', v)
       )
-      .on('realtime', { event: 'INSERT', schema: 'public' }, (v) =>
+      .on('postgres_changes', { event: 'INSERT', schema: 'public' }, (v) =>
         console.log('INSERT on schema', v)
       )
       .subscribe((change) => console.log('schema changed', change))

package-lock.json

@@ -40,7 +40,7 @@
     "@supabase/functions-js": "^1.4.0-next.1",
     "@supabase/gotrue-js": "^1.23.0-next.15",
     "@supabase/postgrest-js": "^1.0.0-next.6",
-    "@supabase/realtime-js": "^1.8.0-next.13",
+    "@supabase/realtime-js": "^1.8.0-next.15",
     "@supabase/storage-js": "^1.8.0-next.5",
     "cross-fetch": "^3.1.5"
   },