采用Supabase+Refine快速搭建管理后台

简介

Refine是一个 React 元框架，用于 CRUD 密集型的 Web 应用程序。它适用于广泛的企业用例，包括内部工具、管理面板、仪表板和 B2B 应用程序。

supabase提供一站式后端服务，包括数据库、对象存储、实时realtime，用户认证、通过API即可完成访问操作。

接下来，学习如何创建一个 Supabase 项目，向你的数据库中添加一些示例数据，并从 Refine 应用查询这些数据。

1.创建应用

登录MemFire Cloud，在控制面板中创建一个新项目，如下图所示：

2.创建数据表

在SQL 编辑器中创建一个表。使用以下 SQL 语句来创建一个带有一些示例数据的国家表。

 -- Create the table
 CREATE TABLE countries (
   id SERIAL PRIMARY KEY,
   name VARCHAR(255) NOT NULL
 );
 -- Insert some sample data into the table
 INSERT INTO countries (name) VALUES ('United States');
 INSERT INTO countries (name) VALUES ('Canada');
 INSERT INTO countries (name) VALUES ('Mexico');
 INSERT INTO countries (name) VALUES ('China');
 INSERT INTO countries (name) VALUES ('China');

执行完上述命令后，可以在表编辑器中查看结果。

3.创建一个 Refine 应用

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

refine-supabase 预设会添加 @refinedev/supabase 补充包，该包支持在 Refine 应用中使用 Supabase。@refinedev/supabase 预装了 Supabase 的依赖项：supabase-js。

npm create refine-app@latest -- --preset refine-supabase my-app

4.在 VS Code 中打开你的 Refine 应用

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

cd my-app
code .

5.启动应用程序

执行如下命令，启动应用程序。

npm run dev

在浏览器中访问 http://localhost:5173，然后就会出现 "欢迎使用 refine "页面。

6.更新 supabaseClient

现在，您必须配置supabaseClient中的访问URL和密钥。supabaseClient 用于授权提供者和数据提供者方法，允许 refine 应用程序连接到 Supabase 后端。

您可以在配置-API页面，获取到应用的访问URL 和 KEY。

打开src/utility/supabaseClient.ts文件，进行配置操作。

import { createClient } from "@refinedev/supabase";
​
const SUPABASE_URL = YOUR_SUPABASE_URL;
const SUPABASE_KEY = YOUR_SUPABASE_KEY
​
export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
  db: {
    schema: "public",
  },
  auth: {
    persistSession: true,
  },
});

7.添加国家资源和页面

接下来，你需要为countries资源配置资源，并为该资源定义页面。使用以下命令，通过 Refine Inferencer 自动添加资源并为countries页面生成代码。

npm run refine create-resource countries

这将在 src/pages/countries/ 目录内定义列表、创建、展示和编辑操作的页面，并使用 <HeadlessInferencer /> 组件。

<HeadlessInferencer /> 组件依赖于 @refinedev/react-table 和 @refinedev/react-hook-form 包。为了避免错误，你应该使用 如下命令将它们作为依赖项安装。

npm install @refinedev/react-table @refinedev/react-hook-form 
npm install @refinedev/inferencer

<HeadlessInferencer /> 是一个 Refine Inferencer 组件，它会自动为列表、创建、展示和编辑页面生成必要的代码。有关 Inferencer 工作原理的更多信息可以在官方文档的此处找到。

8.为国家页面添加路由

为列表、创建、展示和编辑页面添加路由。你应该移除使用 <Welcome /> 组件展示的欢迎页面的索引路由.

src/App.tsx

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 { CountriesCreate, CountriesEdit, CountriesList, CountriesShow } from "./pages/countries";
​
function App() {
  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <Refine
          dataProvider={dataProvider(supabaseClient)}
          liveProvider={liveProvider(supabaseClient)}
          authProvider={authProvider}
          routerProvider={routerBindings}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
          resources={[{
            name: "countries",
            list: "/countries",
            create: "/countries/create",
            edit: "/countries/edit/:id",
            show: "/countries/show/:id"
          }]}>
          <Routes>
            <Route index
              element={<NavigateToResource resource="countries" />}
            />
            <Route path="/countries">
              <Route index element={<CountriesList />} />
              <Route path="create" element={<CountriesCreate />} />
              <Route path="edit/:id" element={<CountriesEdit />} />
              <Route path="show/:id" element={<CountriesShow />} />
            </Route>
          </Routes>
          <RefineKbar />
          <UnsavedChangesNotifier />
          <DocumentTitleHandler />
        </Refine>
      </RefineKbarProvider>
    </BrowserRouter>
  );
}
​
export default App;

9.查看国家页面

现在你应该能够看到沿 /countries 路由的国家页面。现在，你可以使用 Inferencer 生成的用户界面编辑和添加新的国家。

Inferencer 自动生成的代码为您提供了一个良好的起点，您可以在此基础上继续建立列表、创建、显示和编辑页面。点击相应页面中的 Show the auto-generated code 按钮即可获得这些代码。