简介
Refine是一个 React 元框架,用于 CRUD 密集型的 Web 应用程序。它适用于广泛的企业用例,包括内部工具、管理面板、仪表板和 B2B 应用程序。
supabase提供一站式后端服务,包括数据库、对象存储、实时realtime,用户认证、通过API即可完成访问操作。
接下来,学习如何创建一个 Supabase 项目,向你的数据库中添加一些示例数据,并从 Refine 应用查询这些数据。
1.创建应用
登录MemFire Cloud,在控制面板中创建一个新项目,如下图所示:
2.创建数据表
在SQL 编辑器中创建一个表。使用以下 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
。
sql
npm create refine-app@latest -- --preset refine-supabase my-app
4.在 VS Code 中打开你的 Refine 应用
您将在VS Code中开发您的应用程序,连接到 Supabase后端 ,并运行 refine 应用。
bash
cd my-app
code .
5.启动应用程序
执行如下命令,启动应用程序。
arduino
npm run dev
在浏览器中访问 http://localhost:5173,然后就会出现 "欢迎使用 refine "页面。
6.更新 supabaseClient
现在,您必须配置supabaseClient中的访问URL和密钥。supabaseClient 用于授权提供者和数据提供者方法,允许 refine 应用程序连接到 Supabase 后端。
您可以在配置-API页面,获取到应用的访问URL 和 KEY。
打开src/utility/supabaseClient.ts文件,进行配置操作。
php
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
页面生成代码。
arduino
npm run refine create-resource countries
这将在 src/pages/countries/
目录内定义列表、创建、展示和编辑操作的页面,并使用 <HeadlessInferencer />
组件。
<HeadlessInferencer />
组件依赖于 @refinedev/react-table
和 @refinedev/react-hook-form
包。为了避免错误,你应该使用 如下命令将它们作为依赖项安装。
sql
npm install @refinedev/react-table @refinedev/react-hook-form
npm install @refinedev/inferencer
<HeadlessInferencer />
是一个 Refine Inferencer 组件,它会自动为列表、创建、展示和编辑页面生成必要的代码。有关 Inferencer 工作原理的更多信息可以在官方文档的此处找到。
8.为国家页面添加路由
为列表、创建、展示和编辑页面添加路由。你应该移除使用 <Welcome />
组件展示的欢迎页面的索引路由.
src/App.tsx
javascript
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
按钮即可获得这些代码。