在 Web 开发中，React 是最流行的前端框架之一，而 Ra-data-graphql 是一个 React Admin 的开源数据提供程序，用于与基于 GraphQL API 的后端进行交互。该提供程序可以与任何满足 GraphQL 标准的 API 一起使用。
本教程将介绍如何使用 npm 包 @bilgorajskim/ra-data-graphql 来完成 React Admin 的前端实现。
什么是 @bilgorajskim/ra-data-graphql？
@bilgorajskim/ra-data-graphql 是一个用于在 React Admin 中使用 GraphQL 的数据提供程序。该程序与所有满足 GraphQL 标准的 API 兼容，可以大幅度提高开发效率。它基于 react-admin 和 apollo-client 进行开发，结合了两者的优点，提供了简单而强大的 GraphQL 数据获取方案。
安装和使用
安装
为了使用 @bilgorajskim/ra-data-graphql，你需要先安装它。
npm install @bilgorajskim/ra-data-graphql --save
启用
在你的 React Admin 项目中，启用 @bilgorajskim/ra-data-graphql 有以下两种方式：
方式一：
将 @bilgorajskim/ra-data-graphql 传递给 react-admin 中的 <admin> 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ -------- - ---- --------------
------ ------------------- ---- --------------------------------
------ -------- ---- ----------
----- --- - -- -- -
------ ---------------------------------------------------------------
--------- ------------ --------------- --
--------
--
------ ------- ----方式二：
使用 @bilgorajskim/ra-data-graphql 作为数据提供程序并将其传递给 <admin> 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ -------- - ---- --------------
------ - ------------- ------------- - ---- -----------------
------ - -------------- - ---- ----------------------
------ - ------------------- - ---- --------------------------------
------ -------- ---- ----------
-- ------ - --- -------- -- ------------
----- ------------ - --- --------------
---- ---------------------------
------ --- ----------------
---
----- --- - -- -- -
--------------- ----------------------
------ -------------------------------------------------
--------- ------------ --------------- --
--------
-----------------
--
------ ------- ----现在你可以通过数据来源来管理数据。
进阶用法
预定义的查询
@bilgorajskim/ra-data-graphql 支持预定义的查询，它可以让你快速地从 GraphQL API 中获取数据。以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- --------- --------- - ---- --------------
------ --- ---- --------------
----- --------- - ----
----- -------- -
----- -
--
-----
----
------ -
----
-
-
-
--
------ ----- -------- - ----- -- -
----- ---------- ------------ ------- ------ ----- ------ ----- ---
--------- ----------------
---------- ----------- --
---------- -------------- --
---------- ------------- --
---------- -------------------- --
-----------
-------
--
--------------------- - -
------- ---
----- - ------ ----- ------ ----- --
-------- ---
-------- ------
-------- ------
---------- ------
--
------ ------- ---------在以上示例中，我们使用的是 Apollo Client 的 gql 标记，并将 GET_POSTS 查询传递给 React Admin。这个查询可以与 React Admin 的 <list> 组件一起使用，重点在于将数据从 "posts" 命名空间传递到 <datagrid> 组件中的属性，以便实现数据列表。
自定义查询
你还可以使用自定义查询来获取数据。例如，以下是一个将查询参数传递给服务器进行过滤的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- --------- --------- - ---- --------------
------ --- ---- --------------
----- --------- - ----
----- ----------------- -------- -
------------ - ------- ------- -- -
--
-----
----
------ -
----
-
-
-
--
------ ----- -------- - ----- -- -
----- ---------- -------------
--------- ----------------
---------- ----------- --
---------- -------------- --
---------- ------------- --
---------- -------------------- --
-----------
-------
--
----- --------- - -
------ ----------
---------- - ------- ----- ---- --
--
--------------------- - -
------- ---
----- - ------ ----- ------ ----- --
-------- ---
-------- ------
-------- ------
---------- ------
------ ----------
--
------ ------- ---------在该示例中，我们在 GraphQL 查询中使用了一个 $author 变量。我们还将 POSTS 查询传递给了 React Admin 的 <list> 组件。并将 query 属性设置为 postQuery。
查找参考资源
如果你需要查找其他资源的参考，请先通过 <referencefield> 组件来获取该资源。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- --------- --------------- --------- - ---- --------------
------ ----- -------- - ----- -- -
----- ---------- -------------
--------- ----------------
---------- ----------- --
---------- -------------- --
---------------
--------------
------------------
-------------------
-
---------- ------------- --
-----------------
-----------
-------
--
--------------------- - -
------- ---
----- - ------ ----- ------ ----- --
-------- ---
-------- ------
-------- ------
---------- ------
--
------ ------- ---------在该示例中，我们在 <referencefield> 组件中使用了 name 属性来获取相应的名字。
结论
在这篇文章中，我们介绍了 @bilgorajskim/ra-data-graphql npm 包，详细讨论了如何使用它在 React Admin 中使用 GraphQL 数据。我们了解了如何通过预定义和自定义查询来访问数据。我们还看到了如何查找参考资源。
@@以上的代码示例可能需要您在实际使用时进行适当修改。@@
在项目中采用 Ra-data-graphql，可以方便快捷获得 Flutter 数据，其技术意义不言自明，强烈建议您在开发过程中尝试使用此 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f78238a385564ab6935