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

在 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，你需要先安装它。

--- ------- ----------------------------- ------

启用

在你的 React Admin 项目中，启用 @bilgorajskim/ra-data-graphql 有以下两种方式：

方式一：

将 @bilgorajskim/ra-data-graphql 传递给 react-admin 中的 组件。

------ ----- ---- --------
------ - ------ -------- - ---- --------------
------ ------------------- ---- --------------------------------
------ -------- ---- ----------

----- --- - -- -- -
   ------ ---------------------------------------------------------------
      --------- ------------ --------------- --
   --------
--

------ ------- ----

方式二：

使用 @bilgorajskim/ra-data-graphql 作为数据提供程序并将其传递给 组件。

------ ----- ---- --------
------ - ------ -------- - ---- --------------
------ - ------------- ------------- - ---- -----------------
------ - -------------- - ---- ----------------------
------ - ------------------- - ---- --------------------------------
------ -------- ---- ----------

-- ------ - --- -------- -- ------------
----- ------------ - --- --------------
    ---- ---------------------------
    ------ --- ----------------
---

----- --- - -- -- -
    --------------- ----------------------
        ------ -------------------------------------------------
            --------- ------------ --------------- --
        --------
    -----------------
--

------ ------- ----

现在你可以通过数据来源来管理数据。

进阶用法

预定义的查询

@bilgorajskim/ra-data-graphql 支持预定义的查询，它可以让你快速地从 GraphQL API 中获取数据。以下是一个示例：

------ ----- ---- --------
------ - ----- --------- --------- - ---- --------------
------ --- ---- --------------

----- --------- - ----
    ----- -------- -
        ----- -
            --
            -----
            ----
            ------ -
                ----
            -
        -
    -
--

------ ----- -------- - ----- -- -
    ----- ---------- ------------ ------- ------ ----- ------ ----- ---
        --------- ----------------
            ---------- ----------- --
            ---------- -------------- --
            ---------- ------------- --
            ---------- -------------------- --
        -----------
    -------
--

--------------------- - -
    ------- ---
    ----- - ------ ----- ------ ----- --
    -------- ---
    -------- ------
    -------- ------
    ---------- ------
--

------ ------- ---------

在以上示例中，我们使用的是 Apollo Client 的 gql 标记，并将 GET_POSTS 查询传递给 React Admin。这个查询可以与 React Admin 的 组件一起使用，重点在于将数据从 "posts" 命名空间传递到 组件中的属性，以便实现数据列表。

自定义查询

你还可以使用自定义查询来获取数据。例如，以下是一个将查询参数传递给服务器进行过滤的示例：

------ ----- ---- --------
------ - ----- --------- --------- - ---- --------------
------ --- ---- --------------

----- --------- - ----
    ----- ----------------- -------- -
        ------------ - ------- ------- -- -
            --
            -----
            ----
            ------ -
                ----
            -
        -
    -
--

------ ----- -------- - ----- -- -
    ----- ---------- -------------
        --------- ----------------
            ---------- ----------- --
            ---------- -------------- --
            ---------- ------------- --
            ---------- -------------------- --
        -----------
    -------
--

----- --------- - -
    ------ ----------
    ---------- - ------- ----- ---- --
--

--------------------- - -
    ------- ---
    ----- - ------ ----- ------ ----- --
    -------- ---
    -------- ------
    -------- ------
    ---------- ------
    ------ ----------
--

------ ------- ---------

在该示例中，我们在 GraphQL 查询中使用了一个 $author 变量。我们还将 POSTS 查询传递给了 React Admin 的 组件。并将 query 属性设置为 postQuery。

查找参考资源

如果你需要查找其他资源的参考，请先通过 组件来获取该资源。

------ ----- ---- --------
------ - ----- --------- --------------- --------- - ---- --------------

------ ----- -------- - ----- -- -
    ----- ---------- -------------
        --------- ----------------
            ---------- ----------- --
            ---------- -------------- --
            ---------------
                --------------
                ------------------
                -------------------
            -
                ---------- ------------- --
            -----------------
        -----------
    -------
--

--------------------- - -
    ------- ---
    ----- - ------ ----- ------ ----- --
    -------- ---
    -------- ------
    -------- ------
    ---------- ------
--

------ ------- ---------

在该示例中，我们在 组件中使用了 name 属性来获取相应的名字。

结论

在这篇文章中，我们介绍了 @bilgorajskim/ra-data-graphql npm 包，详细讨论了如何使用它在 React Admin 中使用 GraphQL 数据。我们了解了如何通过预定义和自定义查询来访问数据。我们还看到了如何查找参考资源。

@@以上的代码示例可能需要您在实际使用时进行适当修改。@@

在项目中采用 Ra-data-graphql，可以方便快捷获得 Flutter 数据，其技术意义不言自明，强烈建议您在开发过程中尝试使用此 npm 包。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f78238a385564ab6935

阅读全文

猜你喜欢

  • npm 包 keylifesermons 使用教程

    前言 Keylifesermons 是一款基于 React 编写的前端 UI 库。它的特点是简单、易用、可扩展性强，并提供了一些实用的组件。 本教程将介绍 Keylifesermons 的安装、使用以...

    3 年前
  • npm 包 shadowsocks-lite 使用教程

    前言 随着互联网对信息的过滤和限制日益加强，越来越多的人开始使用 Shadowsocks 进行网络代理。Shadowsocks 是一个非常流行的开源代理软件，它具有速度快、安全、稳定等优点。

    3 年前
  • npm 包 ionic-angular-improve 使用教程

    Ionic 是一个流行的移动应用开发框架，它使得开发人员可以使用一些常见的 Web 技术（如 HTML、CSS 和 JavaScript）快速构建高质量的混合式移动应用。

    3 年前
  • npm 包 nuxt-less-resources-loader 使用教程

    在开发前端项目过程中，我们常常需要使用 Less 样式预处理器来编写样式。使用 Less 可以让我们在 CSS 基础上有更多的选择和控制权，同时也可以让我们的代码更加简洁易读。

    3 年前
  • npm 包 material-ui-form-fields 使用教程

    前端界的包管理工具 npm 给了我们非常方便的资源共享和依赖库管理。而 Material-UI 是一个基于 React 的 UI 组件库，使用非常广泛。而 material-ui-form-field...

    3 年前
  • npm 包 @ubiqsmart/sparrow-ubiq-rpc-provider 使用教程

    简介 @ubiqsmart/sparrow-ubiq-rpc-provider 是用于在 Ubiq 区块链上进行 Web3 开发的 npm 包。它允许开发人员通过 JSON-RPC 2.0 协议与 U...

    3 年前
  • npm 包 bizgoblin-pie-pie 使用教程

    在前端开发中，我们经常需要使用各种 npm 包来提高我们的工作效率和代码质量。其中，bizgoblin-pie-pie 是一个非常实用的包，它可以帮助我们快速创建漂亮的饼图。

    3 年前
  • npm 包 github-user-list 使用教程

    前言 GitHub 是全球最大的开源代码托管平台，其中有着非常多的优秀开源项目和贡献者。当我们需要使用或学习一个项目的时候，经常会去查看它的贡献者列表，以了解该项目的作者或者常常参与该项目的人。

    3 年前
  • npm 包 muse-ui-loading 使用教程

    在前端开发中，UI 加载动画是一个非常重要的元素，可以提升用户体验和页面的封面度。本文将介绍一个非常好用的 npm 包：muse-ui-loading，该包提供了多种样式丰富的加载动画，可以让你的网站...

    3 年前
  • npm 包 node-workerize 使用教程

    在前端开发过程中，我们常常需要进行大量的计算、数据处理等工作。这些任务耗时较长且占用主线程，会导致浏览器卡顿甚至崩溃，给用户带来不好的使用体验。 为了解决这个问题，Javascript 提供了 Web...

    3 年前
  • npm 包 @bilgorajskim/ra-language-english 使用教程

    介绍 @bilgorajskim/ra-language-english 是一款针对 React-admin 框架的英语语言包。它包含了英语本地化翻译文件，支持开发者将 React-admin 的 U...

    3 年前
  • npm 包 @bilgorajskim/ra-language-french 使用教程

    随着前端技术的发展，现在很多网站都采用了 React 框架进行开发。React Admin 是一款非常受欢迎的框架，它提供了完整的后台管理页面解决方案，可以帮助开发人员快速构建数据管理应用程序。

    3 年前
  • npm 包 @bilgorajskim/ra-input-rich-text 使用教程

    引言 在现代的 web 应用中，用户输入复杂的文本内容已经成为了一种必要的需求。为了方便用户输入、定制化文本编辑效果和保证页面交互性，我们需要一些好用的富文本编辑组件。

    3 年前
  • npm 包 @kelpjs/kelp 使用教程

    介绍 @kelpjs/kelp 是一个基于 React 和 D3.js 的 JavaScript 库，用于创建交互式海藻图。它可以帮助前端开发者更容易地实现可视化交互效果，以及对海藻图进行定制和扩展。

    3 年前
  • npm 包 express-when-error-type 使用教程

    简介 express-when-error-type 是一个轻量级的 Express.js 中间件，它可以捕获服务器端的错误，并根据错误类型来响应不同的 HTTP 状态码和错误消息。

    3 年前
  • npm 包 g4.localstorage.js 使用教程

    在前端开发中，常常需要通过本地存储方式来保存用户相关的数据，比如用户偏好设置、登录状态等。虽然浏览器本身就提供了 localStorage 以及 sessionStorage，但是这些本地存储方式并不...

    3 年前
  • npm 包 adonis-resource-controller 使用教程

    简介 adonis-resource-controller 是一个 Node.js 的 npm 包，专门用于 AdonisJS 的控制器。AdonisJS 是一个具有优秀架构、完善生态系统的 Node...

    3 年前
  • npm 包 algorithms-samicelus 使用教程

    algorithms-samicelus 是一个基于 JavaScript 的 npm 包，包含算法和数据结构的实现。它涵盖了大量的算法和数据结构，并使用简单的 API 进行操作和测试。

    3 年前
  • npm 包 hogan-partial-test-helper 使用教程

    在前端开发中，使用模板引擎进行页面渲染是非常常见的操作。hogan-partial-test-helper 是一个 npm 包，它提供了一种方便的方式来测试使用 Hogan.js 编写的模板部分。

    3 年前
  • npm 包 mk-aar-grid 使用教程

    在前端开发过程中，经常需要使用到各种第三方库和框架来提高开发效率和代码质量。其中，NPM 是目前最为流行的包管理工具之一。在 NPM 上，我们可以找到许多优秀的前端类库，比如 mk-aar-grid，...

    3 年前

相关推荐

    暂无文章