在现代全栈应用中，Graphcool 是一种受欢迎的后端 API 服务，它能够让开发者快速地构建和部署可扩展的服务。而 @bilgorajskim/ra-data-graphcool 这个 npm 包，正是为 React-admin 提供了对 Graphcool 数据源的支持。
简介
@bilgorajskim/ra-data-graphcool 是一个 NPM 包，它提供了 Graphcool 可作为 React-Admin 数据源的适配器。
React-Admin 是一个基于 React 和 Material UI 的开源框架，提供了一套用于管理 CRUD 操作的组件。通过这个框架，我们能够很容易地构建出管理后台 UI，同时也能够方便地自定义 UI 组件及交互行为。
Graphcool 则是提供了一个类似 Firebase 的服务，你可以使用它来构建自己的 GraphQL 后端服务。使用它可以使你更容易地构建并扩展你的 API，同时也避免了需要自己处理一些复杂的数据库操作的烦恼。
使用 @bilgorajskim/ra-data-graphcool 这个 NPM 包，可以轻松让两者（React-Admin 和 Graphcool）协同工作。
安装
使用 npm 进行安装：
npm install --save @bilgorajskim/ra-data-graphcool
使用
接下来，我们将展示如何使用这个 npm 包来使用 Graphcool 作为 React-Admin 的数据源。
配置
首先，我们需要编写一些必要的配置信息。为了能够连接到 Graphcool API，我们需要提供一个连接字符串，授权信息，以及 GraphQL API 地址。
-- -------------------- ---- -------
-- -------------------
------ - --------------------- - ---- ----------------------------------
----- ---------------------- - -
---- -------------------------------------------------
-------- -
-------------- ------- -----------------------------------------------
--
--
----- ------------ - ----------------------------------------------
------ ------- -------------在这个例子中，我们将 connection string 和授权信息存储在了环境变量中。你也可以直接将它们写在代码中，或以其他方式进行加载，以便更好地保护这些敏感信息。
定义 schema 和 resolvers
@bilgorajskim/ra-data-graphcool 还需要一些关于 schema 和 resolvers 的定义。这些定义告诉 Graphcool 如何将数据转换成 GraphQL，以及如何处理 API 请求。
下面的 GraphQL schema 示例应该排版成合适的图。
-- -------------------- ---- ------- ---- ---- - --- --- ------ ------- ----- ------- ------- ----- --------- ----------- - ---- ---- - --- --- ----- ------- ------ ------- ------ -------- - ---- ------- - --- --- ----- ------- ----- ----- - ----- --------------- - --- --- ------ ------ ----- ------ - ----- ------------------ - --- --- ----- ------ - ---- -------- - ----------------- ----------------- ---- -------------- ----- ---- -------------------- -------------------- ------- ----------------- ----- ------- - ---- ----- - ----------------- ---------------- ----- ---------- ------- ----------------- -------- -------- ----- ---- ----------------- ---------------- ----- ---------- ------- ----------------- -------- -------- ----- ---- -------------------- ---------------- ----- ---------- ------- -------------------- ----------- ----------- ----- ------- - ---- ------------ - --------------- ----- ---- --------------- ----- ------ -
展示数据的 GraphQL query 示例应该排版成合适的图。
-- -------------------- ---- -------
----- ---- -
-------- -
--
----
---- -
--
-----
----
-
-
-这些定义应该与 Graphcool 服务 API 中的定义保持一致。
-- -------------------- ---- -------
-- ------------
------ ----- ---- --------
------ - ------ -------- - ---- --------------
------ -------- ---- ------------------------
------ -------- ---- ------------------------
------ ---------- ---- --------------------------
------ ------------ ---- -----------------
-- ------
----- --- - -- -- -
------ ----------------------------
--------- ------------ --------------- --------------- ------------------- --
--------
--
------ ------- ----现在，我们已经成功地配置了数据源，让 React-Admin 和 Graphcool 协同工作。接下来，我们将展示从 Graphcool API 中获取数据的方法。
调用 API
使用 @bilgorajskim/ra-data-graphcool，我们可以向 Graphcool API 发出请求，然后获取数据。下面是一个使用 RaGrid 和 RaSearchViews 组件从 Graphcool API 中获取数据的示例。
-- -------------------- ---- -------
-- --------------------------
------ ----- ---- --------
------ - ----- --------- ---------- ----------- -------- - ---- --------------
------ ----- -------- - ----- -- -
----- -----------
--------- ----------------
---------- -------------- --
---------- ------------- --
---------- -------------------- --
---------- ------------------------ -------------- ------ --
-----------
-------
--
------ ------- ---------列表显示该如何显示 示例应该排版成合适的图
-- -------------------- ---- -------
-- --------------------------
------ ----- ---- --------
------ - ----- ----------- --------------- ------------ --------- - ---- --------------
----- --------- - -- ------ -- -- -
------ ---------- ------- - ------------------- - -----------
--
------ ----- -------- - ----- -- -
----- ----------------- --- -----------
------------
---------- -------- ----------- --
---------- -------------- --
---------- --------- ------------- --
--------------- ------------ ------------------ ------------------
------------ ----------------- --
-----------------
-------------
-------
--编辑页面应该是怎样的 示例应该排版成合适的图
-- -------------------- ---- -------
-- ----------------------------
------ ----- ---- --------
------ - ------- ----------- ---------- --------------- ----------- - ---- --------------
------ ----- ---------- - ----- -- -
------- -----------
------------
---------- -------------- --
---------- --------- ------------- --
--------------- ------------ ----------------- ------------------
------------ ----------------- --
-----------------
-------------
---------
--创建页面应该是怎样的 示例应该排版成合适的图
至此，你已成功使用了 @bilgorajskim/ra-data-graphcool 将 Graphcool 与 React-Admin 集成在了一起。
结论
@bilgorajskim/ra-data-graphcool 为开发团队提供了建立 GraphQL 后端服务的快速入口。通过这个 npm 包，开发者可以非常方便地使用 Graphcool 和 React-Admin 来构建强大的管理系统，极大地提高了开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f78238a385564ab6934