Supabase.js是Supabase数据库服务的官方JavaScript客户端库,用于与Supabase API进行交互。 最新版本Supabase.js v2带来了一系列令人振奋的新特性、更新和改进,使开发者在构建现代Web应用程序时拥有更加强大和灵活的工具。

让我们深入了解这些新功能,并看看它们如何改进您的Supabase体验!接下来,我们将逐步探索Supabase.js v2的亮点和特性,帮助您更好地了解这个新版本。

首先需要用npm install @supabase/supabase-js安装最新版本。

明确的构造器选项

构造函数中的所有客户端特定选项都是键入库的。

  const supabase = createClient(apiURL, apiKey, {
  db: {
    schema: 'public',
  },
  auth: {
    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: true,
  },
  realtime: {
    channels,
    endpoint,
  },
  global: {
    fetch: customFetch,
    headers: DEFAULT_HEADERS,
  },
})
  

支持typescript

这些库现在支持typescript。

  // v2 - definitions are injected in `createClient()`
import type { Database } from './DatabaseDefinitions'
const supabase = createClient<Database>(SUPABASE_URL, ANON_KEY)
const { data } = await supabase.from('messages').select().match({ id: 1 })

// v1 -- previously definitions were injected in the `from()` method
supabase.from<Definitions['Message']>('messages').select('*')
  

类型可以通过CLI生成。

  supabase start
supabase gen types typescript --local > DatabaseDefinitions.ts
  

数据操作返回最小值

.insert() / .upsert() / .update() / .delete() 默认情况下不返回行:PR.

以前,这些方法默认返回插入/更新/删除的行(这引起了一些混乱),你可以通过指定 “returning: ‘minimal’“选择不返回它。现在的默认行为是不返回记录。要返回插入/更新/删除的行,请在最后添加一个.select()的调用,例如:

  const { data, error } = await supabase
    .from('my_table')
    .delete()
    .eq('id', 1)
    .select()
  

新的排序默认值

.order()现在默认为Postgres的默认值:PR

以前nullsFirst默认为false,这意味着null是最后排序的。这对性能是不利的,例如,如果该列使用NULLS FIRST的索引(这是索引的默认方向)。

Cookies和localstorage命名空间

Auth库中的存储密钥名称已经改变,包括项目参考,这意味着现有的网站如果将其JWT到期时间设置为较长的时间,可能会发现他们的用户在这次升级中被注销。

  const defaultStorageKey = `sb-${new URL(this.authUrl).hostname.split('.')[0]}-auth-token`
  

新的授权类型

类型化已经被重新设计。Session接口现在保证它总是有access_token, refresh_tokenuser

  interface Session {
    provider_token?: string | null
    access_token: string
    expires_in?: number
    expires_at?: number
    refresh_token: string
    token_type: string
    user: User
}
  

新的认证方法

我们将删除signIn()方法,改用更明确的函数签名。 signInWithPassword(), signInWithOtp(), 和 signInWithOtp().

  // v2
const { data } = await supabase.auth.signInWithPassword({
  email: 'hello@example',
  password: 'pass',
})
// v1
const { data } = await supabase.auth.signIn({
  email: 'hello@example',
  password: 'pass',
})
  

新的实时方法

在Realtime库中有一个新的channel()方法,它将被用于我们的多人游戏更新。

  supabase
  .channel('any_string_you_want')
  .on('presence', { event: 'track' }, (payload) => {
    console.log(payload)
  })
  .subscribe()

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

我们将废弃以前用于监听postgres变化的`.from().on().subscribe()‘方法。

废弃的setAuth()

废弃并删除了setAuth()。要设置一个自定义的access_token jwt,请将自定义的头信息传入提供的createClient()方法:(PR)

所有变化

  • supabase-js
    • shouldThrowOnError已被删除,直到所有客户端库都支持该选项(PR)。
  • postgrest-js
  • Gotrue-js
    • supase-js客户端允许传递一个storageKey参数,这将允许用户设置本地存储中用于存储会话的密钥。默认情况下,这将与supabase项目参考文献一起被命名为空间。(PR)
    • signIn方法现在分为signInWithPassword, signInWithOtp, signInWithOAuth (PR)
    • 弃用并删除了session(), user(),改用getSession()。如果用户已经登录,getSession()将总是返回一个有效的会话,这意味着不再有随机注销。(PR)
    • 废弃并删除了对multitab'支持的设置,因为getSession()`和gotrue的重用间隔设置已经处理了多个标签的会话管理(PR)
    • 不再抛出随机错误,gotrue-js v2总是返回一个自定义的错误类型:(PR)
      • AuthSessionMissingError(AuthSession错误)
        • 表示预期有一个会话,但没有。
      • AuthNoCookieError表示预期有cookie,但没有。
        • 表示期望有一个cookie,但没有。
      • AuthInvalidCredentialsError表示期望有一个cookie但没有。
        • 表示传递了不正确的凭证。
    • 将 “api “命名空间更名为 “admin”,“admin “命名空间将只包含只能在受信任的服务器端环境中使用的方法,并配有服务角色密钥
    • resetPasswordForEmailgetUserupdateUser移至GoTrueClient,这意味着它们可以从supabase.auth命名空间访问supabase-js,而不是通过supabase.auth.api来访问它们。
    • 删除了sendMobileOTP, sendMagicLinkEmail,改用signInWithOtp
    • 删除了signInWithEmail, signInWithPhone,改为signInWithPassword
    • 删除了 “用电子邮件签名”、“用电话签名”,改为 “签名”。
    • 用 “updateUser “代替了 “update”。
  • Storage-js
    • 返回类型更加严格。函数类型曾经表明,即使没有错误,返回的数据也可能是空的。现在我们使用联合类型,只有在出现错误时才将数据标记为空,反之亦然。(PR)
    • uploadupdate函数返回上传对象的路径作为path参数。以前的返回值是将桶的名称预置在路径上,这使得该值难以传递给其他storage-js方法,因为所有的方法都是单独获取桶的名称和路径。我们还选择将返回值称为path而不是Key(PR)
    • getPublicURL只返回数据对象中的公共URL。这与我们的其他方法保持一致,只在数据对象内返回。没有错误返回,因为这个方法不能抛出一个错误(PR)
    • createSignedUrl'和createSignedUrls’中,签名的URL将以signedUrl'而不是signedURL’返回(PR)
    • createSignedUrlcreateSignedUrlsgetPublicUrl返回的URL进行编码(PR)
    • createsignedUrl曾经直接返回一个URL,并在数据对象中。这是不一致的。现在我们在所有方法中都只返回数据对象中的值。(PR)
    • createBucket返回一个数据对象,而不是直接返回桶的名字。(PR)
    • 固定了元数据的类型 (PR)
    • 更好的错误类型使其更容易快速追踪到出错的原因。
    • SupabaseStorageClient不再被导出。使用 “StorageClient “代替。(PR)。
  • Realtime-js
    • RealtimeSubscription类不再存在,被RealtimeChannel取代。
    • RealtimeClientdisconnect方法现在返回类型为void。以前它返回的类型是Promise<{ error: Error | null; data: boolean }
    • SupabaseClient类中删除了removeAllSubscriptionsremoveSubscription方法。
    • 删除了 “SupabaseRealtimeClient “类。
    • 删除了 “SupabaseQueryBuilder “类。
    • 删除了 “SupabaseEventTypes “类型。
      • 考虑将其重命名为 “RealtimePostgresChangeEvents”,并将其移至 “realtime-js “版本。
    • 删除了.from('table').on('INSERT', () ⇒ {}).subscribe(),以支持新的实时客户端API。