快速开始

在 refine 中使用 Supabase

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

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

创建 refine 应用

使用 create refine-app 创建一个 refine 应用。

refine-supabase 预设会添加 @refinedev/supabase 补充包，该包支持在 refine 应用中使用 Supabase。@refinedev/supabase 开箱即用包含了 Supabase 依赖：supabase-js。

Terminal
1
npm create refine-app@latest -- --preset refine-supabase my-app
3

在 VS Code 中打开 refine 应用

您将在 VS Code 中开发应用，连接 Supabase 后端并运行 refine 应用。

Terminal
1
2
cd my-appcode .
4

启动应用

启动应用，在浏览器中访问 http://localhost:5173，您应该会看到 refine 的欢迎页面。

Terminal
1
npm run dev

refine 欢迎页面

5

更新 `supabaseClient`

现在您需要使用 Supabase API 的 SUPABASE_URL 和 SUPABASE_KEY 更新 supabaseClient。supabaseClient 用于身份验证提供者和数据提供者方法，使 refine 应用能够连接到您的 Supabase 后端。

Project URL
Anon key
src/utility/supabaseClient.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
import { createClient } from "@refinedev/supabase";const SUPABASE_URL = YOUR_SUPABASE_URL;const SUPABASE_KEY = YOUR_SUPABASE_KEYexport const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {  db: {    schema: "public",  },  auth: {    persistSession: true,  },});
6

添加 instruments 资源和页面

然后您需要配置资源并为 instruments 资源定义页面。

使用以下命令通过 refine Inferencer 自动为 instruments 添加资源并生成页面代码。

这将在 src/pages/instruments/ 目录中为 list、create、show 和 edit 操作定义页面，使用 <HeadlessInferencer /> 组件。

<HeadlessInferencer /> 组件依赖于 @refinedev/react-table 和 @refinedev/react-hook-form 包。为避免错误，您应该使用 npm install @refinedev/react-table @refinedev/react-hook-form 安装它们作为依赖项。

Terminal
1
npm run refine create-resource instruments
7

为 instruments 页面添加路由

为 list、create、show 和 edit 页面添加路由。

src/App.tsx
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import { Refine, WelcomePage } from "@refinedev/core";import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";import routerBindings, {  DocumentTitleHandler,  NavigateToResource,  UnsavedChangesNotifier,} from "@refinedev/react-router-v6";import { dataProvider, liveProvider } from "@refinedev/supabase";import { BrowserRouter, Route, Routes } from "react-router-dom";import "./App.css";import authProvider from "./authProvider";import { supabaseClient } from "./utility";import { InstrumentsCreate, InstrumentsEdit, InstrumentsList, InstrumentsShow } from "./pages/instruments";function App() {  return (    <BrowserRouter>      <RefineKbarProvider>        <Refine          dataProvider={dataProvider(supabaseClient)}          liveProvider={liveProvider(supabaseClient)}          authProvider={authProvider}          routerProvider={routerBindings}          options={{            syncWithLocation: true,            warnWhenUnsavedChanges: true,          }}          resources={[{            name: "instruments",            list: "/instruments",            create: "/instruments/create",            edit: "/instruments/edit/:id",            show: "/instruments/show/:id"          }]}>          <Routes>            <Route index              element={<NavigateToResource resource="instruments" />}            />            <Route path="/instruments">              <Route index element={<InstrumentsList />} />              <Route path="create" element={<InstrumentsCreate />} />              <Route path="edit/:id" element={<InstrumentsEdit />} />              <Route path="show/:id" element={<InstrumentsShow />} />            </Route>          </Routes>          <RefineKbar />          <UnsavedChangesNotifier />          <DocumentTitleHandler />        </Refine>      </RefineKbarProvider>    </BrowserRouter>  );}export default App;
8

查看 instruments 页面

现在您应该能够通过 /instruments 路由看到 instruments 页面。您现在可以使用 Inferencer 生成的 UI 编辑和添加新的 instruments。

Inferencer 自动生成的代码为您提供了一个良好的起点，您可以在此基础上继续构建 list、create、show 和 edit 页面。可以通过点击各自页面中的 Show the auto-generated code 按钮获取这些代码。