Refine v5 接入 Directus社区 Data Provider 的安装、接入与数据流实战指南【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refineDirectus 是流行的开源无头 CMS / 数据平台而 Refine 通过社区维护的Directus Data Provider让两者无缝对接——无需编写额外的适配层代码即可在 Refine 应用中直接对 Directus 后端做增删改查。本文以仓库中 Directus 示例文档 为主体结合 Refine v5 的 Data Provider 契约与数据 Hook 体系带你完成从安装、接入到理解底层数据流调用的完整闭环。读完本文你将掌握如何在 Refine 项目中注册社区数据提供者、按资源配置数据源、以及理解getList、create、getOne等核心方法背后的调用链。认识 Refine 的 Directus Data Provider按照 Directus 示例文档 的定位Refine 提供开箱即用full-featured的 Directus Data Provider它允许你快速访问 Directus 中的数据且不需要额外的安装步骤或自定义代码。这意味着在 Refine 应用中你只需要将该数据提供者注册到Refine /组件即可通过统一的 Refine data hooks 操作 Directus 的数据集合Collections。以下几点是理解该集成时首先要明确的事实社区维护Directus Data Provider 由社区开发者 tspvivek 开发并维护文中为致敬其贡献而列出并非 Refine 官方仓库内置的packages包。包名在 Community Data Providers 集成指南 中该提供者的 npm 包被记录为tspvivek/refine-directus与官方内置的 simple-rest、Supabase、Hasura 等提供者并列收录于社区列表。支持边界同一份社区指南明确指出如果使用这些社区数据提供者时遇到问题应首先联系提供者的维护者再寻求 Refine 官方帮助——这是评估社区集成可靠性的重要预期管理。示例应用还提供了演示登录凭据便于你直接体验Usernamedemodemo.comPassword123456原文档在网页上通过 CodeSandbox 内嵌了可直接运行的示例预览以refine-directus示例仓库的example目录为源你可以登录后直观查看基于该数据提供者的完整 CRUD 界面。Data Provider 在 Refine 中的角色要正确使用 Directus Provider先要理解它在 Refine 架构中的位置。Data Provider 指南 给出的定义是Data Provider 作为应用的数据层data layer负责发起 HTTP 请求并封装数据获取方式其方法随后被 Refine 通过 data hooks 消费。这一设计带来的直接收益是你的业务组件只与useList、useCreate等 Hook 打交道至于请求如何拼装、响应如何映射完全由数据提供者内部实现。指南还特别说明data hooks 基于TanStack Query管理数据获取缓存、失效、加载态等关注点由此得到统一处理。在应用中注册 Data Provider要激活数据提供者只需将其传给Refine /组件的dataProvider属性import { Refine } from refinedev/core; import dataProvider from ./dataProvider; const App () ( Refine /* ... */ dataProvider{dataProvider} / );对于 Directus 场景dataProvider即来自社区包的tspvivek/refine-directus工厂函数通常接收 Directus 实例或 API URL 等初始化参数。多 Data Provider 与资源级路由Refine 允许在同一个应用中使用多个数据提供者向dataProvider传入键值对对象键为提供者名称值为提供者本身且default键必须存在以指定默认提供者const App () ( Refine dataProvider{{ default: defaultDataProvider, example: exampleDataProvider, }} resources{[ { // 该资源将使用 default 数据提供者 name: posts, }, { name: products, // 通过 meta.dataProviderName 为该资源指定提供者 meta: { dataProviderName: example }, }, ]} / );选择提供者有两种方式在 data hooks 及数据相关组件中通过meta.dataProviderName指定或在资源配置的meta.dataProviderName中设置默认值可被 hooks 中的同名属性覆盖。这意味着你可以让 Directus 托管部分资源同时让其他资源走 simple-rest 或第三方 API实现异构数据源的统一管理。安装与接入 Directus Data Provider依据 Supported Data Providers 片段 的说明Refine 支持的数据提供者可以通过npm install [packageName]安装或在npm create refine-applatest projectName创建项目时于 CLI 中选择。对应到 Directusnpm install tspvivek/refine-directus安装后在应用入口注册即可import { Refine } from refinedev/core; import { DirectusProvider } from tspvivek/refine-directus; // 依据提供者初始化方式传入 Directus 相关配置 const dataProvider DirectusProvider({ /* 实例或地址配置 */ }); const App () ( Refine dataProvider{dataProvider} {/* resources 及路由 */} /Refine );接入后Refine 会根据你的资源定义自动将posts、products等集合的 CRUD 操作映射到 Directus REST API。值得注意的是docs 站点本身已将 Directus 纳入集成体系——你可以在 integrations.ts 与 integration-icons/directus.tsx 中看到 Directus 作为受支持集成项及其品牌图标被引入这进一步印证了该数据提供者在生态中的正式地位。数据提供者的方法契约Directus Provider 实现的能力社区 Directus Provider 之所以能无需额外代码工作是因为它实现了 Refine 定义好的DataProvider接口。理解这套契约有助于你排查问题或按需扩展。以下是 Data Provider 指南 中给出的接口全貌import { DataProvider } from refinedev/core; const dataProvider: DataProvider { // required methods getList: ({ resource, pagination, sorters, filters, meta }) Promise, create: ({ resource, variables, meta }) Promise, update: ({ resource, id, variables, meta }) Promise, deleteOne: ({ resource, id, variables, meta }) Promise, getOne: ({ resource, id, meta }) Promise, getApiUrl: () , // optional methods getMany: ({ resource, ids, meta }) Promise, createMany: ({ resource, variables, meta }) Promise, deleteMany: ({ resource, ids, variables, meta }) Promise, updateMany: ({ resource, ids, variables, meta }) Promise, custom: ({ url, method, filters, sorters, payload, query, headers, meta }) Promise, };其中必需方法required构成了最小编程接口可选方法optional用于批量操作与自定义请求优化。核心必需方法详解getList获取资源列表支持排序、过滤、分页。无论底层 API 如何Refine 都要求其返回data与total两个字段。total总行数的取法因提供者而异——simple-rest 类提供者常用x-total-count响应头GraphQL 提供者常取自pageInfo.total之类的字段Directus Provider 则会按其响应结构决定。其参数类型为resource: string、pagination?: Pagination、sorters?: CrudSorting、filters?: CrudFilters、meta?: MetaDataQuery。该方法的消费方是useList/useInfiniteListHook。create用resource与variables创建新记录。参数类型resource: string、variables: TVariables默认{}可通过useCreate的类型参数定义、meta?: MetaDataQuery。消费方为useCreate。update用resource、id、variables更新记录。消费方为useUpdate。deleteOne按resource与id删除单条记录。消费方为useDelete。getOne按resource与id获取单条记录。消费方为useOne。getApiUrl返回apiUrl值供useApiUrlHook 使用例如import { DataProvider } from refinedev/core; export const dataProvider (apiUrl: string): DataProvider ({ getApiUrl: () apiUrl, // ... });可选方法与批量操作如果 Directus API 支持批量语义提供者可以进一步实现getManyuseMany按ids批量获取createManyuseCreateMany批量创建updateManyuseUpdateMany批量更新deleteManyuseDeleteMany批量删除customuseCustom处理非标准 REST 端点或外部资源参数包含url、methodget/delete/head/options/post/put/patch以及可选的filters、sorters、payload、query、headers、meta。需要指出的是这些可选方法未实现时Refine 会自动退化为逐个调用对应的单条方法例如未实现getMany时多次调用getOne因此提供者的最小可用是建立在必需方法之上的。Data Hooks 与提供者方法的映射关系为了方便你在组件中直接使用Data Provider 指南 的 Supported Hooks 一节给出了完整的映射表Data Provider 方法消费它的 Data HookgetListuseList/useInfiniteListcreateuseCreateupdateuseUpdatedeleteOneuseDeletegetOneuseOnegetApiUrluseApiUrlcustomuseCustomgetManyuseManycreateManyuseCreateManydeleteManyuseDeleteManyupdateManyuseUpdateMany这意味着在业务代码中你无需感知底层是 Directus 还是其他后端。例如列出文章import { useList } from refinedev/core; const { result: { data: posts } } useList({ resource: posts });分页、筛选与排序的需求同样由 hooks 统一抽象Directus Provider 只需在getList内把这些参数翻译成 Directus 查询语法即可。meta 传参与错误处理通过 meta 传递自定义参数接入真实 API 时常需要携带自定义请求头等参数。Refine 的meta字段允许你在 hooks 调用侧传参再由提供者内部消费import { useOne } from refinedev/core; useOne({ resource: post, id: 1, meta: { headers: { x-custom-header: hello world, }, }, });提供者一侧则从meta中解构出该头信息并注入请求示例见 Data Provider 指南 的 meta Usage 一节getOne: async ({ resource, id, variables, meta }) { const { headers } meta; const url ${apiUrl}/${resource}/${id}; httpClient.defaults.headers { ...headers }; const { data } await httpClient.get(url, variables); return { data }; },统一错误格式Refine 要求数据提供者抛出的错误继承自HttpError含message与statusCode。提供者既可以在方法内手动构造并Promise.reject(error)也可以借助 Axios 拦截器在响应返回前统一转换const axiosInstance axios.create(); axiosInstance.interceptors.response.use( (response) response, (error) { const customError: HttpError { ...error, message: error.response?.data?.message, statusCode: error.response?.status, }; return Promise.reject(customError); }, );这样Directus 返回的 4xx/5xx 错误会以统一的HttpError形态呈现在 Refine 的 notification、表单与异常处理流程中。按需覆盖与自定义社区提供者不可能覆盖所有团队的定制需求。Refine 的 FAQ 给出了两种不 fork 整个提供者的扩展方式Swizzle使用 Refine CLI 的 swizzle 能力把数据提供者代码解包进项目后按需修改相关说明见 CLI 文档。对象展开覆盖利用 JavaScript 展开语法覆盖单个方法例如把update从PATCH改为PUTimport dataProvider from refinedev/simple-rest; const simpleRestProvider dataProvider(API_URL); const myDataProvider { ...simpleRestProvider, update: async ({ resource, id, variables }) { const url ${apiUrl}/${resource}/${id}; const { data } await httpClient.put(url, variables); return { data }; }, }; Refine dataProvider{myDataProvider}{/* ... */}/Refine;同样的思路适用于tspvivek/refine-directus如果你需要调整 Directus 特有的鉴权头、字段映射或查询参数在解包后的对象上覆盖对应方法即可无需改动 Refine 本身。小结与下一步本文围绕 Directus 示例文档 展开梳理了在 Refine v5 中使用社区 Directus Data Provider 的完整链路理解其社区维护属性与支持边界 → 通过tspvivek/refine-directus安装注册 → 利用dataProvider与meta.dataProviderName完成多数据源路由 → 依据DataProvider接口理解getList、create、getOne等方法的职责与 hooks 映射 → 借助meta与HttpError处理自定义参数和统一错误。原文档提供的演示凭据demodemo.com/123456可用于登录在线示例直观验证上述机制的实际运行效果。如果需要进一步深入建议继续阅读仓库中的 Data Provider 指南含全部方法参数类型与批量操作说明、Community Data Providers 集成指南查看包括 Directus 在内的完整社区提供者清单以及 Supported Data Providers 中对安装与 CLI 选择方式的说明——这些资料与本文共同构成了从会用到懂原理的完整参考链。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Refine v5 接入 Directus：社区 Data Provider 的安装、接入与数据流实战指南
Refine v5 接入 Directus社区 Data Provider 的安装、接入与数据流实战指南【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refineDirectus 是流行的开源无头 CMS / 数据平台而 Refine 通过社区维护的Directus Data Provider让两者无缝对接——无需编写额外的适配层代码即可在 Refine 应用中直接对 Directus 后端做增删改查。本文以仓库中 Directus 示例文档 为主体结合 Refine v5 的 Data Provider 契约与数据 Hook 体系带你完成从安装、接入到理解底层数据流调用的完整闭环。读完本文你将掌握如何在 Refine 项目中注册社区数据提供者、按资源配置数据源、以及理解getList、create、getOne等核心方法背后的调用链。认识 Refine 的 Directus Data Provider按照 Directus 示例文档 的定位Refine 提供开箱即用full-featured的 Directus Data Provider它允许你快速访问 Directus 中的数据且不需要额外的安装步骤或自定义代码。这意味着在 Refine 应用中你只需要将该数据提供者注册到Refine /组件即可通过统一的 Refine data hooks 操作 Directus 的数据集合Collections。以下几点是理解该集成时首先要明确的事实社区维护Directus Data Provider 由社区开发者 tspvivek 开发并维护文中为致敬其贡献而列出并非 Refine 官方仓库内置的packages包。包名在 Community Data Providers 集成指南 中该提供者的 npm 包被记录为tspvivek/refine-directus与官方内置的 simple-rest、Supabase、Hasura 等提供者并列收录于社区列表。支持边界同一份社区指南明确指出如果使用这些社区数据提供者时遇到问题应首先联系提供者的维护者再寻求 Refine 官方帮助——这是评估社区集成可靠性的重要预期管理。示例应用还提供了演示登录凭据便于你直接体验Usernamedemodemo.comPassword123456原文档在网页上通过 CodeSandbox 内嵌了可直接运行的示例预览以refine-directus示例仓库的example目录为源你可以登录后直观查看基于该数据提供者的完整 CRUD 界面。Data Provider 在 Refine 中的角色要正确使用 Directus Provider先要理解它在 Refine 架构中的位置。Data Provider 指南 给出的定义是Data Provider 作为应用的数据层data layer负责发起 HTTP 请求并封装数据获取方式其方法随后被 Refine 通过 data hooks 消费。这一设计带来的直接收益是你的业务组件只与useList、useCreate等 Hook 打交道至于请求如何拼装、响应如何映射完全由数据提供者内部实现。指南还特别说明data hooks 基于TanStack Query管理数据获取缓存、失效、加载态等关注点由此得到统一处理。在应用中注册 Data Provider要激活数据提供者只需将其传给Refine /组件的dataProvider属性import { Refine } from refinedev/core; import dataProvider from ./dataProvider; const App () ( Refine /* ... */ dataProvider{dataProvider} / );对于 Directus 场景dataProvider即来自社区包的tspvivek/refine-directus工厂函数通常接收 Directus 实例或 API URL 等初始化参数。多 Data Provider 与资源级路由Refine 允许在同一个应用中使用多个数据提供者向dataProvider传入键值对对象键为提供者名称值为提供者本身且default键必须存在以指定默认提供者const App () ( Refine dataProvider{{ default: defaultDataProvider, example: exampleDataProvider, }} resources{[ { // 该资源将使用 default 数据提供者 name: posts, }, { name: products, // 通过 meta.dataProviderName 为该资源指定提供者 meta: { dataProviderName: example }, }, ]} / );选择提供者有两种方式在 data hooks 及数据相关组件中通过meta.dataProviderName指定或在资源配置的meta.dataProviderName中设置默认值可被 hooks 中的同名属性覆盖。这意味着你可以让 Directus 托管部分资源同时让其他资源走 simple-rest 或第三方 API实现异构数据源的统一管理。安装与接入 Directus Data Provider依据 Supported Data Providers 片段 的说明Refine 支持的数据提供者可以通过npm install [packageName]安装或在npm create refine-applatest projectName创建项目时于 CLI 中选择。对应到 Directusnpm install tspvivek/refine-directus安装后在应用入口注册即可import { Refine } from refinedev/core; import { DirectusProvider } from tspvivek/refine-directus; // 依据提供者初始化方式传入 Directus 相关配置 const dataProvider DirectusProvider({ /* 实例或地址配置 */ }); const App () ( Refine dataProvider{dataProvider} {/* resources 及路由 */} /Refine );接入后Refine 会根据你的资源定义自动将posts、products等集合的 CRUD 操作映射到 Directus REST API。值得注意的是docs 站点本身已将 Directus 纳入集成体系——你可以在 integrations.ts 与 integration-icons/directus.tsx 中看到 Directus 作为受支持集成项及其品牌图标被引入这进一步印证了该数据提供者在生态中的正式地位。数据提供者的方法契约Directus Provider 实现的能力社区 Directus Provider 之所以能无需额外代码工作是因为它实现了 Refine 定义好的DataProvider接口。理解这套契约有助于你排查问题或按需扩展。以下是 Data Provider 指南 中给出的接口全貌import { DataProvider } from refinedev/core; const dataProvider: DataProvider { // required methods getList: ({ resource, pagination, sorters, filters, meta }) Promise, create: ({ resource, variables, meta }) Promise, update: ({ resource, id, variables, meta }) Promise, deleteOne: ({ resource, id, variables, meta }) Promise, getOne: ({ resource, id, meta }) Promise, getApiUrl: () , // optional methods getMany: ({ resource, ids, meta }) Promise, createMany: ({ resource, variables, meta }) Promise, deleteMany: ({ resource, ids, variables, meta }) Promise, updateMany: ({ resource, ids, variables, meta }) Promise, custom: ({ url, method, filters, sorters, payload, query, headers, meta }) Promise, };其中必需方法required构成了最小编程接口可选方法optional用于批量操作与自定义请求优化。核心必需方法详解getList获取资源列表支持排序、过滤、分页。无论底层 API 如何Refine 都要求其返回data与total两个字段。total总行数的取法因提供者而异——simple-rest 类提供者常用x-total-count响应头GraphQL 提供者常取自pageInfo.total之类的字段Directus Provider 则会按其响应结构决定。其参数类型为resource: string、pagination?: Pagination、sorters?: CrudSorting、filters?: CrudFilters、meta?: MetaDataQuery。该方法的消费方是useList/useInfiniteListHook。create用resource与variables创建新记录。参数类型resource: string、variables: TVariables默认{}可通过useCreate的类型参数定义、meta?: MetaDataQuery。消费方为useCreate。update用resource、id、variables更新记录。消费方为useUpdate。deleteOne按resource与id删除单条记录。消费方为useDelete。getOne按resource与id获取单条记录。消费方为useOne。getApiUrl返回apiUrl值供useApiUrlHook 使用例如import { DataProvider } from refinedev/core; export const dataProvider (apiUrl: string): DataProvider ({ getApiUrl: () apiUrl, // ... });可选方法与批量操作如果 Directus API 支持批量语义提供者可以进一步实现getManyuseMany按ids批量获取createManyuseCreateMany批量创建updateManyuseUpdateMany批量更新deleteManyuseDeleteMany批量删除customuseCustom处理非标准 REST 端点或外部资源参数包含url、methodget/delete/head/options/post/put/patch以及可选的filters、sorters、payload、query、headers、meta。需要指出的是这些可选方法未实现时Refine 会自动退化为逐个调用对应的单条方法例如未实现getMany时多次调用getOne因此提供者的最小可用是建立在必需方法之上的。Data Hooks 与提供者方法的映射关系为了方便你在组件中直接使用Data Provider 指南 的 Supported Hooks 一节给出了完整的映射表Data Provider 方法消费它的 Data HookgetListuseList/useInfiniteListcreateuseCreateupdateuseUpdatedeleteOneuseDeletegetOneuseOnegetApiUrluseApiUrlcustomuseCustomgetManyuseManycreateManyuseCreateManydeleteManyuseDeleteManyupdateManyuseUpdateMany这意味着在业务代码中你无需感知底层是 Directus 还是其他后端。例如列出文章import { useList } from refinedev/core; const { result: { data: posts } } useList({ resource: posts });分页、筛选与排序的需求同样由 hooks 统一抽象Directus Provider 只需在getList内把这些参数翻译成 Directus 查询语法即可。meta 传参与错误处理通过 meta 传递自定义参数接入真实 API 时常需要携带自定义请求头等参数。Refine 的meta字段允许你在 hooks 调用侧传参再由提供者内部消费import { useOne } from refinedev/core; useOne({ resource: post, id: 1, meta: { headers: { x-custom-header: hello world, }, }, });提供者一侧则从meta中解构出该头信息并注入请求示例见 Data Provider 指南 的 meta Usage 一节getOne: async ({ resource, id, variables, meta }) { const { headers } meta; const url ${apiUrl}/${resource}/${id}; httpClient.defaults.headers { ...headers }; const { data } await httpClient.get(url, variables); return { data }; },统一错误格式Refine 要求数据提供者抛出的错误继承自HttpError含message与statusCode。提供者既可以在方法内手动构造并Promise.reject(error)也可以借助 Axios 拦截器在响应返回前统一转换const axiosInstance axios.create(); axiosInstance.interceptors.response.use( (response) response, (error) { const customError: HttpError { ...error, message: error.response?.data?.message, statusCode: error.response?.status, }; return Promise.reject(customError); }, );这样Directus 返回的 4xx/5xx 错误会以统一的HttpError形态呈现在 Refine 的 notification、表单与异常处理流程中。按需覆盖与自定义社区提供者不可能覆盖所有团队的定制需求。Refine 的 FAQ 给出了两种不 fork 整个提供者的扩展方式Swizzle使用 Refine CLI 的 swizzle 能力把数据提供者代码解包进项目后按需修改相关说明见 CLI 文档。对象展开覆盖利用 JavaScript 展开语法覆盖单个方法例如把update从PATCH改为PUTimport dataProvider from refinedev/simple-rest; const simpleRestProvider dataProvider(API_URL); const myDataProvider { ...simpleRestProvider, update: async ({ resource, id, variables }) { const url ${apiUrl}/${resource}/${id}; const { data } await httpClient.put(url, variables); return { data }; }, }; Refine dataProvider{myDataProvider}{/* ... */}/Refine;同样的思路适用于tspvivek/refine-directus如果你需要调整 Directus 特有的鉴权头、字段映射或查询参数在解包后的对象上覆盖对应方法即可无需改动 Refine 本身。小结与下一步本文围绕 Directus 示例文档 展开梳理了在 Refine v5 中使用社区 Directus Data Provider 的完整链路理解其社区维护属性与支持边界 → 通过tspvivek/refine-directus安装注册 → 利用dataProvider与meta.dataProviderName完成多数据源路由 → 依据DataProvider接口理解getList、create、getOne等方法的职责与 hooks 映射 → 借助meta与HttpError处理自定义参数和统一错误。原文档提供的演示凭据demodemo.com/123456可用于登录在线示例直观验证上述机制的实际运行效果。如果需要进一步深入建议继续阅读仓库中的 Data Provider 指南含全部方法参数类型与批量操作说明、Community Data Providers 集成指南查看包括 Directus 在内的完整社区提供者清单以及 Supported Data Providers 中对安装与 CLI 选择方式的说明——这些资料与本文共同构成了从会用到懂原理的完整参考链。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考