I can’t get Supabase real-time listen to Postgres changes to work

Question

Inspired by the Supabase docs, I have this code in a React Native app:

useEffect(() => {
  if (session?.user?.id === null) return
  const channel = supabase
    .channel('value-db-changes', { selfBroadcast: true })
    .on(
      'postgres_changes',
      {
        event: 'UPDATE',
        schema: 'public',
        table: 'messages',
        filter: `user_id=${session?.user?.id}`
      },
      (payload) => console.log('Supabase change', payload)
    )
    ?.subscribe()
}, [session?.user?.id])

VSCode warns me that Property 'subscribe' does not exist on type 'never' and the console.log never shows as I edit rows in my database.

Hmm these docs are completely different: https://supabase.com/docs/reference/javascript/subscribe — Tom Söderlund, Sep 30 '22 at 11:59

score 2 · Accepted Answer · answered Oct 11 '22 at 12:00

You might be using the old version of Supabase but trying v2 syntax.

Supabase v1 documentation for realtime: https://supabase.com/docs/reference/javascript/subscribe

As per the latest update for v2 - https://supabase.com/blog/supabase-js-v2,

// v2
supabaseClient
  .channel('any_string_you_want')
  .on(
    'postgres_changes',
    {
      event: 'INSERT',
      schema: 'public',
      table: 'movies',
    },
    (payload) => {
      console.log(payload)
    }
  )
  .subscribe()

// v1
supabase
  .from('movies')
  .on('INSERT', (payload) => {
    console.log(payload)
  })
  .subscribe()

I had similar issues with this code, but installing the right version with v1 syntax worked,

npm uninstall @supabase/supabase-js@rc
npm uninstall @supabase/supabase-js
npm install @supabase/supabase-js

score 2 · Answer 2 · answered Mar 02 '23 at 18:12

Your code seems to be correct. The problem might be that you forgot to enable Replication on supabase.

Open your supabase project dashboard, select "database" from the left hand side menu, then choose "replication". Click on the "tables" button under "source" and choose which tables you're allowing to work with realtime.

score 0 · Answer 3 · answered Oct 01 '22 at 10:34

Hi from comparing your code snippet with the supabase docs, it should generally work.

I'm assuming your listener isn't triggered because one of those:

filter is too specific and your changes don't trigger it: e.g. are you editing the messages table with the same user.id that you're listening to?
the selfBroadcast option isn't in the Supabase docs and quick internet search didn't bring it up as well

As a first step I would set up the broadest subscription and test if this one is triggered and what's in the payload. Then step by step create the filter to only listen to the events that are of interest.

const mySubscription = supabase
  .from('*')
  .on('*', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

I can’t get Supabase real-time listen to Postgres changes to work

3 Answers3