Supabase JS客户端教程

Supabase JS客户端教程

supabase-js An isomorphic Javascript client for Supabase. 项目地址: https://gitcode.com/gh_mirrors/su/supabase-js

---

项目介绍

Supabase JS客户端是一款用于Supabase数据库的全功能JavaScript库，它提供了与Supabase服务交互的能力，包括查询数据库、订阅实时事件、文件上传下载、执行PostgreSQL函数、调用边缘计算函数以及处理pgvector查询等功能。这款客户端设计为同构JavaScript，兼容多种环境，从浏览器到Node.js，并支持UMD、ESM导入方式，确保了广泛的应用场景。

项目快速启动

要迅速开始使用Supabase JS客户端，首先你需要通过npm安装库：

npm install @supabase/supabase-js

然后，在你的项目中引入并初始化Supabase客户端：

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://your-supabase-instance-url'
const supabaseKey = 'your-public-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)

// 示例：查询数据库
supabase.from('your_table').select('*').then((res) => {
  console.log(res.data)
})

对于非Node.js环境（如直接在HTML中使用），可以通过CDN引入：

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@latest"></script>
<script>
  const { createClient } = supabase
  const supabase = createClient('...your-url...', '...your-key...')
</script>

应用案例和最佳实践

在构建Web应用时，利用Supabase JS客户端的最佳实践包括：

• 实时数据同步：通过.on()方法监听数据变化，实现实时更新UI。

  supabase.from('your_table').on('*', (payload) => {
    updateUi(payload.new);
  }).subscribe();
  

• 错误处理：总是包围API调用以优雅地处理错误。

  try {
    await supabase.from('your_table').insert([{ name: 'New Entry' }]);
  } catch (error) {
    console.error("Error inserting data", error);
  }
  

• 安全连接：使用私钥仅在后端，公共API访问应使用公开密钥。

典型生态项目

Supabase作为一个生态系统，其JS客户端常被结合在各种Web框架或库中，例如Next.js、React、Vue.js等。一个典型的用例是在一个Next.js应用程序中整合Supabase，实现用户认证流程：

// 在Next.js中使用Auth组件
import { supabase } from '../lib/supabaseClient';

export async function signIn(email, password) {
  const { user, error } = await supabase.auth.signIn({ email, password });
  if (error) throw new Error(error.message);
  return user;
}

export async function signUp(email, password) {
  const { user, error } = await supabase.auth.signUp({ email, password });
  if (error) throw new Error(error.message);
  return user;
}

这里的../lib/supabaseClient.js是初始化Supabase客户端的地方，保持代码的整洁性。

通过这些步骤和实践，你可以高效地将Supabase集成到你的项目中，利用其强大功能来加速开发过程。记住，正确配置Supabase实例和理解其提供的服务是成功实施的关键。

supabase-js An isomorphic Javascript client for Supabase. 项目地址: https://gitcode.com/gh_mirrors/su/supabase-js