我不能让Supabase实时听Postgres的变化

Question

受Supabase文档的启发，我在一个React中编写了以下代码：

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警告我，在我编辑数据库中的行时，Property 'subscribe' does not exist on type 'never'和console.log永远不会显示。

Answer 1

您可能正在使用Supabase的旧版本，但尝试使用v2语法。

支持实时的v1文档：https://supabase.com/docs/reference/javascript/subscribe

根据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()

我在这段代码中也有类似的问题，但是用v1语法安装正确的版本是有效的，

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

Answer 2

通过将您的代码片段与supabase文档进行比较，它通常会正常工作。

我假设你的听众没有被触发，因为其中之一：

• 过滤器太具体了，并且您的更改不会触发它:例如，您是否使用正在侦听的相同user.id编辑user.id表？
• selfBroadcast选项不在Supabase文档中，快速互联网搜索也没有打开它

作为第一步，我将设置最广泛的订阅并测试是否触发了这个订阅，以及负载中的内容。然后一步一步地创建过滤器，只听感兴趣的事件。

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