supabase订阅变得更加容易-DEV365 开发者社区

频道

目前，订阅Supabase中的实时数据非常有限，并且不容易使用。我个人认为，channels功能是不必要的，并且浪费了开发人员的时间...目前。让我们不要添加新功能模块，直到当前功能足够... capiche？

（继续阅读以获取包装信息...）

如果您来自Firebase，您将对订阅实时数据的方式感到非常失望。对于onAuthStateChange和channels也是如此。这里有一些问题。

您必须先获取数据，因为订阅不会事先返回当前数据。
您必须观看每种类型的更改“插入，更新，删除”才能查看更改。您必须在每种情况下进行相应更新。
仅返回当前的更改，而不是全部数据。
UI令人难以置信的过度设计和违反直觉。只是弄清楚它的工作方式至少需要一个小时就没有例子。
开始订阅时有一个few second delay。
您只能使用一个过滤器：eq。
没有办法限制结果。
也许最重要的是，您不能使用带有supabase频道的视图。
当插入一组数据时，它不会批量返回，而是单独返回。
没有乐观的更新，也没有持久的离线数据功能。

问题1-4-干净的代码

我无助于supabase的局限性，但是我确实编写了一个软件包，使订阅方式更加容易。

问题5-9

这些是supabase的当前局限性。不要误会我的意思，我喜欢supabase ，我目前正在此博客上使用它：Code.Build。在我看来，这些是back燃料上的问题，而不是列表的顶部要解决。对实时数据的订阅对许多人来说非常重要。让我们把这个最新起来。我不久前写了一个list of issues。我终于决定解决我能做的。

这还不够好：

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

问题10-离线和乐观

好吧，所以最后一个是可行的，现在有人正在使用supabase-cache-helpers进行缓存。

我还编写了一个应用程序，向您展示如何做乐观的更新。基本上，您只需创建一个数据数组，然后在订阅返回之前更改该数组。这就是Firebase的订阅方式非常快。我稍后可能会将其集成到 j-supabase 。

。

您还可以看到一个示例实时todo 我使用订阅和乐观更新构建：

Demo
Code

J-Supabase

所以，我创建了一个简单的树木摇摆软件包。我打算稍后再添加更多很酷的东西。

Source Code

验证

第一件事是第一件事。安装软件包：

npm i j-supabase

确保您拥有最新 Supabase SDK V2的版本：

npm i @supabase/supabase-js

身份验证现在按预期的是像Firebase一样：

import { authUser, authSession, realtime } from 'j-supabase';

// user
const unsubscribe = authUser(supabase)
  .subscribe(user => console.log(user));

// session
const unsubscribe = authSession(supabase)
  .subscribe(session => console.log(session));

返回当前数据，您可以轻松地到达变量，而无需导航对象的子树。您可以在我的previous article中看到它是如何完成的。

实时数据

您可以按照预期的方式获取实时数据：

// subscribe to a table
const unsubscribe = realtime<Todo>(supabase)
  .from('todos')
  .subscribe(snap => console.log(snap));

// use the one `eq` filter
const unsubscribe = realtime<Todo>(supabase)
  .from('todos')
  .eq('uid', uid)
  .subscribe(snap => console.log(snap));

我确实有两个可选输入：

idfield

以防万一您的主要密钥不是id：

const unsubscribe = realtime<Todo>(supabase, {
    idField: 'user_id'
  })
  .from('todos')
  .eq('uid', uid)
  .subscribe(snap => console.log(snap));

模式

在声明使用createClient时，必须设置异步模式，但是您可以以这种方式设置订阅模式：

const unsubscribe = realtime<Todo>(supabase, {
    schema: 'marketing'
  })
  .from('todos')
  .eq('uid', uid)
  .subscribe(snap => console.log(snap));

此软件包非常简单，非常干净（我不使用任何依赖项），并且非常有用！

这几乎是Supabase可以做的……目前...但是我希望很快能看到新的过滤器，并希望在不久的将来可以订购的Views。

可能的待办事项列表：

auto-Resubscribe - 虽然Supabase确实会自动重新订阅，但您会丢失数据。这会保留它。
乐观的更新 - 在所有情况下都是不可能的乐观更新，但是我可以在此软件包中添加upsert，insert，update和delete功能，以从订阅表中捕获乐观的更新。 tbd。

希望这对某人有帮助，