在 SolidJS 中使用 Supabase

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

创建一个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);

创建 SolidJS 应用

使用 degit 命令创建一个 SolidJS 应用。

Terminal

1
npx degit solidjs/templates/js my-app

安装 Supabase 客户端库

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

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

Terminal

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

声明 Supabase 环境变量

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

Project URL

Anon key

1
2
VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>VITE_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>

从应用查询数据

在 App.jsx 中创建 Supabase 客户端来获取 instruments 数据。

添加 getInstruments 函数获取数据，并将查询结果显示在页面上。

src/App.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createClient } from "@supabase/supabase-js";import { createResource, For } from "solid-js";const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>');async function getInstruments() {  const { data } = await supabase.from("instruments").select();  return data;}function App() {  const [instruments] = createResource(getInstruments);  return (    <ul>      <For each={instruments()}>{(instrument) => <li>{instrument.name}</li>}</For>    </ul>  );}export default App;

启动应用

启动应用并在浏览器中访问 http://localhost:3000，您应该能看到 instruments 列表。

Terminal

1
npm run dev