refine

• refinedev/refine
  • MIT, React
  • A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
  • Headless CRUD 组件
  • 支持 NextJS, Remix
  • 默认提供 antd, mui, mantine, chakra
  • 支持集成 ReactTable, KBar, React Hook Form
  • ACL - cerbos, casbin
  • Data Provider - RESTful, GQL, appwrite, nestjs, supabase, medusa
  • Live Providev- appwrite, ably, socket.io, supabase
• @refinedev/nextjs-router
  • @nestjsx/crud-request
    • nestjsx/crud
      • fork gid-oss/dataui-nestjs-crud
• @aliemir/react-live
  • sucrase
  • prism-react-renderer

npm add @refinedev/core

# inferencer
npm add @refinedev/inferencer @refinedev/react-hook-form @refinedev/react-table @tanstack/react-table

# antd
npm add @refinedev/antd antd dayjs

依赖包@refinedev/core@refinedev/inferencer@refinedev/react-hook-form@refinedev/react-table@tanstack/react-table@refinedev/antdantddayjs

组件

export interface IResourceComponents {
  list?: ResourceRouteComposition;
  create?: ResourceRouteComposition;
  clone?: ResourceRouteComposition;
  edit?: ResourceRouteComposition;
  show?: ResourceRouteComposition;
}

Notes

• Router -> Resource
  • Resource 定义包含了 Path
  • 使用 Resource 定义生成路由
    • /NAME/ACTION/:id
    • createResourceRoutes
  • 自动从当前 Path 识别 Resource
    • matchResourceFromRoute
      • 先生成所有 route -> {action,resource}
      • 通过 Segment 匹配
      • 从结果选择一个最接近的
  • 识别到了 Resource 再推导具体的页面
    • 列表、详情、创建、编辑
• 上下文/Context - 扩展点
  • refine
  • resource
  • router
    • 方法: go, back, parse, Link
    • 实现: react-router, nextjs, remix router
  • router-picker - 用于支持 legacy router
  • translation - i18n
    • 方法: translate, changeLocale, getLocale
    • Hooks: useTranslate, useSetLocale, useGetLocale
  • undoable queue
  • unsaved warn
  • access control - 访问控制 - casbin、casl、cerbos、 accesscontrol.js
    • useCan
    • <CanAccess />
    • action
      • list, create, edit, delete, show
  • audit log
    • 方法
      • create
      • get - 返回列表
      • update - 可为 Log 加名字，作为 milestone
    • useLog, useLogList
  • auth
    • 必须方法: login, check, logout, onError
    • 可选方法: register, forgotPassword, updatePassword, getPermissions, getIdentity
    • AuthProvider API
  • data
    • 实现: simple rest, graphql, nestjs CRUD, airtable, strapi, supabase, hasura, appwrite, medusa
    • medusa
  • live - 数据实时更新
    • 方法: subscribe, unsubscribe, publish
    • Hooks: useSubscription, usePublish
    • 实现: ably, supabase, hasura, appwrite, nhost
  • notification
    • 方法: open, close
• 组件
  • Provider - antd, mui, mantine, chakra
• useResource
  • resources 所有
  • resource - 当前
  • resourceName
  • id
  • action
  • select
  • identifier - 相同 Resource 识别

Data Provider

• IDataContextProvider
  • getList -> useList, useInfiniteList
  • create -> useCreate
  • update -> useUpdate
  • deleteOne -> useDeleteOne
  • getOne -> useOne
  • getMany -> useMany
  • createMany -> useCreateMany
  • updateMany -> useUpdateMany
  • deleteMany -> useDeleteMany
  • getApiUrl -> useApiUrl
  • custom -> useCustom
• Many 接口可选
• @refinedev/simple-rest
  • ${apiUrl}/${resource} - [{id}]

SDK

• @refinedev/sdk
• const useSdk = (): { sdk: Client; config: IConnectContext }
  • IConnectContext {baseUrl,clientId,resourcesName}