npm 包 graphql-to-js-client-builder 使用教程

前言

GraphQL 是一种用于 API 的查询语言。它使得客户端能够准确地获得它所需要的数据，而无需额外获取不需要的数据。在前后端分离的项目中，GraphQL 已经成为了非常流行的查询语言。在前端中，通过使用 JavaScript 代码来对 GraphQL 进行调用，可以实现非常方便的数据获取与处理。但是，对于一些不熟悉 GraphQL 语法的前端开发者来说，写 GraphQL 查询字符串是一项需要付出一定学习成本的工作。近年，NPM 上出现了很多实用的 GraphQL 工具包，其中，graphql-to-js-client-builder 就是其中的一个非常实用的工具包，下面将会介绍如何使用它来方便地在前端中进行 GraphQL 的调用。

安装

执行以下命令，即可成功安装 graphql-to-js-client-builder：

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

基本用法

先来看一个简单的示例：

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

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

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

可以看到，我们将用到的 graphql-to-js-client-builder 导入了进来，然后使用了它提供的 build 方法，将 schema、query、以及 variables 生成了对应的 GraphQL 调用参数。这个结果被用作请求方法 fetch 的请求体，从而完成了对 GraphQL API 的调用。

详细介绍

buildClientSchema

buildClientSchema 是 GraphQL.js 中提供的解析方法，用于将 GraphQL Schema（通常为字符串形式）进行解析，返回一个可以被 graphql-to-js-client-builder 使用的、详细的 Schema JSON 形式。

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

print

print 将一个 DocumentNode 对象转换为字符串。

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

build

build 方法才是真正执行 GraphQL 请求的函数。它将 schema、query、variables 等参数合并，返回一个包含整合后参数的对象，同时该对象也可直接传入 GraphQL 的 fetch API 中进行调用。其中，schema 是由 buildClientSchema 返回的 Schema JSON，query 由 print 返回的字符串，variables 是包含 GraphQL 请求参数的一个对象。

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

示例

假设，我们有一个包含用户信息的 GraphQL Schema，其定义如下：

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

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

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

根据这个 Schema，我们可以使用 GraphQL 来获取、修改、删除一些用户信息。如下所示，我们将会以这个 Schema 为基础来展示一下 graphql-to-js-client-builder 的用法。

查询单个用户信息

在 GraphQL 中，查询一个单个用户信息的方式是使用 query 方法，其中通过参数传进该用户的 ID。这里我们将查询 ID 为“1”的用户信息。查询语句如下：

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

使用 graphql-to-js-client-builder 来构成此查询，示例如下：

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

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

注意，在此示例中我们已经使用了 variables 对象来传递查询参数。

查询多个用户信息

查询多个用户信息的方法是使用 users 方法。其函数体为一个数组，因此会返回一个由多个用户信息构成的数组。查询语句如下：

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

使用 graphql-to-js-client-builder 来构成此查询，示例如下：

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

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

注意，此查询请求未传递任何 parameters 参数。

修改用户信息

修改用户信息的方法是使用 mutation 方法，同时在其函数体中传递需要被修改的用户 ID 以及需要被更新的用户信息。修改语句如下：

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

使用 graphql-to-js-client-builder 来构成此查询，示例如下：

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

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

增加用户信息

增加用户信息的方法也是使用 mutation 方法，同时在其函数体中传递需要添加的用户名和年龄信息。添加语句如下：

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

使用 graphql-to-js-client-builder 来构成此查询，示例如下：

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

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

结语

在前后端分离的开发模式中，使用 GraphQL 查询语言能够更加方便、高效地获取和处理数据。graphql-to-js-client-builder 作为一款实用的 GraphQL 工具包，使得不熟悉 GraphQL 语法的前端开发者也能够愉快地使用 GraphQL 进行数据的查询与处理。本文结合一个完整的 Schema 示例，详细地介绍了 graphql-to-js-client-builder 的基本使用方法和几个实际应用场景，相信读者已经对其有了深入的了解。希望本文能够对前端开发者的 GraphQL 学习和实践能够有少许帮助。

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

阅读全文

猜你喜欢

  • npm 包 tiny-sprintf 使用教程

    在前端开发中，字符串格式化是一个经常用到的功能。这种情况下，我们往往需要使用到一个字符串格式化工具。今天，我们要介绍的是一个小巧但功能十分强大的 npm 包：tiny-sprintf。

    4 年前
  • npm 包 deep-equal-ident 使用教程

    在前端开发中，我们经常需要比较两个对象是否相等，但是 Javascript 中的 == 或 === 运算符并不能完全满足我们的需求，这时候我们就需要使用某些工具来进行更严格的比较。

    4 年前
  • npm 包 chai-members-deep 使用教程

    简介 chai-members-deep 是一个 npm 包，是 chaijs 其中一个插件，它为 chaijs 添加了 depth 值的检查，可以检查一个对象某个属性的深度，特别适合检查具有多级结构...

    4 年前
  • npm 包 @mapbox/polyline 使用教程

    @mapbox/polyline 是一个可以将地理坐标点编码为 Polyline string 或者将 Polyline string 解码为地理坐标点的工具包。本文将详细介绍如何使用该 npm 包及...

    4 年前
  • npm 包 sitemap-webpack-plugin 使用教程

    前言 随着网站规模的不断扩大，网站地图已成为现代网站架构的核心部分之一。网站地图可以有效地帮助搜索引擎检索和索引网站中的所有页面，从而提高网站的可访问性和搜索性能。

    4 年前
  • npm 包 osrm-text-instructions 使用教程

    在前端开发中，我们经常需要使用一些关于地图和路线规划的信息，例如在网页中展示如何到达某个地方或计算两个地点之间的距离。npm 包 osrm-text-instructions 提供了一种方便的方法，使...

    4 年前
  • npm 包 vue-analytics 使用教程

    在前端开发中，我们通常需要统计网站的访问量、用户行为等数据。Google Analytics 就是一款很不错的工具，它可以帮助我们收集这些信息。而针对 Vue 开发的应用，我们可以使用 npm 包 v...

    4 年前
  • npm包keyword-extractor使用教程

    介绍 keyword-extractor是一个JavaScript模块，可以提取一段文本中的关键词。它是一个开源的npm包，可以通过npm安装。它的优点在于它可以识别常用语言中的常用词汇，并忽略文章中...

    4 年前
  • npm 包 dgeni-alive 使用教程

    前言 在前端开发过程中，我们常常需要编写文档来描述项目的功能和代码的实现方式，而编写和维护文档是一件繁琐的工作。Dgeni-alive 是一个可以帮助我们自动生成文档的工具。

    4 年前
  • npm 包 grunt-util-property 的使用教程

    什么是 npm 和 grunt-util-property npm 是 JavaScript 世界的包管理工具，可以通过它来安装和管理 JavaScript 库和工具。

    4 年前
  • npm 包 grunt-util-options 使用教程

    前言 在前端开发中，我们经常需要借助工具来简化和优化工作流程。其中之一便是 Grunt，而在 Grunt 中，我们又经常需要使用 grunt-contrib-* 系列的插件来实现任务。

    4 年前
  • npm 包 grunt-util-process 使用教程

    前端开发中，自动化构建是必不可少的一部分。而构建工具的选择就显得至关重要。其中，Grunt 是一款非常流行的构建工具，能够帮助开发者完成一系列的自动化任务。而 grunt-util-process 这...

    4 年前
  • npm 包 grunt-util-spawn 使用教程

    许多前端开发人员使用 Grunt 来自动化任务，它是一个强大的 JavaScript 任务运行器。其中一个常用的插件是 grunt-util-spawn，它可以将命令行命令作为子进程运行并捕获其输出。

    4 年前
  • npm 包 grunt-util-args 使用教程

    在前端开发中，管理和构建项目是非常重要的环节。而 npm 和 grunt 作为前端开发的两大重要工具，都能够有效地提高项目的开发效率和管理效果。今天我们要介绍的是一个 npm 包，它就是 grunt-...

    4 年前
  • npm 包 grunt-git-describe 使用教程

    Git 是最受欢迎的代码版本控制系统之一，在前端开发中非常常见。随着项目规模和代码量的增加，我们需要更多的自动化任务和工具来帮助我们提高开发效率。grunt-git-describe 是一个流行的 G...

    4 年前
  • npm 包 karma-jasmine-jquery-matchers 使用教程

    在前端开发中，我们经常会用到一些测试工具，例如 Karma 和 Jasmine。而在进行前端单元测试时，判断 DOM 元素是否符合预期是必不可少的一步。而测试工具 karma-jasmine-jque...

    4 年前
  • npm包`creditable`使用教程

    什么是npm？ npm全称Node Package Manager（Node.js包管理器），是一款JavaScript软件包管理器，用于管理Node.js平台安装的软件包。

    4 年前
  • npm 包 xrayhtml 使用教程

    在前端开发中，经常需要从 HTML 文档中抓取数据。手工编写解析代码不仅麻烦，而且容易出错。这时，使用 xrayhtml 这个 npm 包就可以轻松解决问题。本文将为大家介绍 xrayhtml 的使用...

    4 年前
  • npm 包 kinetic 使用教程

    Kinetic.js 是一款轻量级的 HTML5 Canvas JavaScript 框架，用来图层处理、物体（组）的控制以及事件的处理等。该框架可以让你的代码更加精简、代码可读性更高、并且更方便有效...

    4 年前
  • npm 包 query-component 使用教程

    简介 query-component 是一个轻量级的 JavaScript 库，它提供了一组用于操作 URL 查询字符串的方法，可以帮助你方便地从 URL 中读取、修改和重置查询参数。

    4 年前

相关推荐

    暂无文章