npm 包 @bilgorajskim/ra-data-graphcool 使用教程

在现代全栈应用中，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 包来使用 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

阅读全文

猜你喜欢

  • npm 包 eslint-closure 使用教程

    在前端开发中，代码质量的保证是非常重要的。而现代前端开发中，JavaScript 代码的复杂度和规模都在不断提高，如何保证代码的质量并避免不必要的错误就成为了开发者的一大问题。

    3 年前
  • npm 包 eslint-config-closure-es5 使用教程

    什么是 eslint-config-closure-es5 eslint-config-closure-es5 是一个基于 Google Closure Style Guide 编写的 JavaScr...

    3 年前
  • npm 包 iotp 使用教程

    1. 什么是 iotp iotp 是一个基于 Node.js 的可扩展物联网平台。它提供了一种简单的方式，能够使物理设备和人工智能交互。 iotp 包括两个核心组件：ioBroker 和 Homebr...

    3 年前
  • npm 包 in-ui-components-react 使用教程

    在现代 Web 开发中，组件化已成为一种不可或缺的技术。为了提高组件的复用性以及开发效率，我们通常会选择使用第三方 UI 库，其中 in-ui-components-react 就是一款非常优秀的 n...

    3 年前
  • npm 包 mysocket 使用教程

    mysocket 是一个基于 WebSockets 的通信库，它可以让你非常方便地在前端和后端之间建立实时通信。使用它可以轻松实现聊天室、实时数据同步、多人协作等功能。

    3 年前
  • npm 包 react-button-with-warning 使用教程

    在前端开发中，按钮是非常常见的元素。而且，有些时候需要给按钮添加提示，以帮助用户更好的理解按钮的作用。在这种情况下，就需要用到一个非常实用的 npm 包：react-button-with-warni...

    3 年前
  • npm 包 eslint-config-closure-es6 使用教程

    介绍 eslint-config-closure-es6 是一款符合 Google JavaScript 编码风格指南的 eslint 配置包，主要适用于编写 ES6 代码。

    3 年前
  • npm 包 eslint-plugin-closure 使用教程

    前端开发离不开代码检查和排错，这也是开发高质量应用的重要一环。其中，eslint 是一款非常流行的 JavaScript 代码检查工具，它可以帮助开发人员规范代码风格，避免一些常见的错误。

    3 年前
  • npm 包 generator-spa-app 使用教程

    在前端开发中，使用 npm 包可以大幅提升效率，特别是在构建应用框架和组件库时非常有帮助。generator-spa-app 是一个适用于单页应用的 npm 脚手架，它能够快速生成基础项目结构并集成常...

    3 年前
  • npm 包 ngx-resizer 使用教程

    简介 ngx-resizer 是一个 AngularJS 的 npm 包，用于实现图片的缩放和裁剪。它支持多种缩放方式和裁剪方式，在图片处理方面非常灵活。 安装 要使用 ngx-resizer，首先需...

    3 年前
  • npm 包 webpack-mpa-cli 使用教程

    介绍 webpack-mpa-cli 是一款使用 webpack 构建多页面应用的脚手架工具。它可以自动化地生成多个入口文件、自动拉取公共代码、自动提取 CSS 文件并支持 JavaScript 和 ...

    3 年前
  • npm 包 @opdime/mysql-promises 使用教程

    前言 在前端开发中，数据库操作是不可缺少的一环。而 MySQL 数据库是非常常用的一个关系型数据库，尤其在企业级应用中。为了方便开发人员进行 MySQL 数据库的操作，@opdime 团队开发了一个 ...

    3 年前
  • npm 包 @dmartss/types 使用教程

    随着前端技术的不断发展，对于 TypeScript 越来越多的应用，大量优秀的 TypeScript 类型工具也应运而生，其中就包括了 @dmartss/types 这个 npm 包。

    3 年前
  • npm 包 @horizonjs/elasticsearch 使用教程

    前言 Elasticsearch 是一个开源分布式搜索引擎，被广泛应用于各种类型的应用程序和服务中。它能够让我们高效的存储和检索海量数据，并且提供了强大的搜索和聚合功能。

    3 年前
  • npm 包 Hypergit 使用教程

    简介 Hypergit 是一个基于 git 的分布式版本控制系统，使用 Hypergit 可以方便快捷地共享、协作和管理项目代码。本文将介绍 Hypergit 的使用方法和注意事项。

    3 年前
  • npm 包 preact-component-console 使用教程

    前言 随着现代 Web 开发的迅速发展，前端技术也在不断地更新和演进。在前端开发中，我们可以使用 NPM 包来优化和提高我们项目的开发效率和性能。preact-component-console 就是...

    3 年前
  • npm 包 @beisen/sidebar 使用教程

    介绍 @beisen/sidebar 是一个基于 Vue.js 的侧边栏组件。该组件支持根据路由配置自动生成侧边栏菜单，支持多级菜单，也支持自定义菜单。 安装与使用 安装 --- ------- --...

    3 年前
  • npm 包 cc-qtumd-rpc 使用教程

    前言 随着区块链技术的兴起，越来越多的开发者开始涉足这一领域。在区块链应用的开发中，需要用到一些特定的工具和技术，其中 cc-qtumd-rpc 是一个常用的 npm 包，可以帮助开发者与 qtumd...

    3 年前
  • npm 包 gsutil-crawler 使用教程

    前言 在进行一些数据处理过程中，我们常常需要从 Google Cloud Storage 上下载一些数据，而 gsutil 是一个 Google 官方提供的命令行工具，可以帮助我们上传下载数据到 GC...

    3 年前
  • npm 包 @floatboth/broccoli-zopfli 使用教程

    在前端开发中，代码压缩是非常重要的一个环节。减小文件体积能加速网站加载速度，提升用户使用体验。在 Node.js 下，我们可以使用许多工具进行代码压缩，其中 @floatboth/broccoli-z...

    3 年前

相关推荐

    暂无文章