快速开始

在React中使用Supabase

学习如何创建Supabase项目，向数据库添加示例数据，以及从React应用查询数据。

1

创建一个Supabase项目

前往 database.new 并创建一个新的Supabase项目。

当您的项目启动并运行后，前往 表编辑器，创建一个新表并插入一些数据。

或者，您可以在项目的 SQL编辑器 中运行以下代码片段。这将创建一个包含一些示例数据的 instruments 表。

1
2
3
4
5
6
7
8
9
10
11
12
13
-- 创建表create table instruments (  id bigint primary key generated always as identity,  name text not null);-- 向表中插入一些示例数据insert into instruments (name)values  ('violin'),  ('viola'),  ('cello');alter table instruments enable row level security;

通过添加RLS策略，使表中的数据可公开读取：

1
2
3
4
create policy "public can read instruments"on public.instrumentsfor select to anonusing (true);
2

创建React应用

使用Vite模板创建一个React应用。

Terminal
1
npm create vite@latest my-app -- --template react
3

安装Supabase客户端库

最快捷的入门方式是使用supabase-js客户端库，它提供了从React应用操作Supabase的便捷接口。

进入React应用目录并安装supabase-js。

Terminal
1
cd my-app && npm install @supabase/supabase-js
4

声明Supabase环境变量

创建.env.local文件并填入您的Supabase连接变量：

Project URL
Anon key
1
2
VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>VITE_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>
5

从应用查询数据

在App.jsx中添加getInstruments函数来获取数据，并使用Supabase客户端将查询结果显示在页面上。

src/App.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { useEffect, useState } from "react";import { createClient } from "@supabase/supabase-js";const supabase = createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_ANON_KEY);function App() {  const [instruments, setInstruments] = useState([]);  useEffect(() => {    getInstruments();  }, []);  async function getInstruments() {    const { data } = await supabase.from("instruments").select();    setInstruments(data);  }  return (    <ul>      {instruments.map((instrument) => (        <li key={instrument.name}>{instrument.name}</li>      ))}    </ul>  );}export default App;
6

启动应用

启动应用，在浏览器中访问http://localhost:5173，打开浏览器控制台，您应该能看到乐器列表。

Terminal
1
npm run dev

后续步骤