简介
graphel 是一款基于 JavaScript 的 GraphQL 客户端，它可以与任何支持 GraphQL 协议的服务器相连，使用它可以方便的构建 GraphQL 查询语言，进行 GraphQL 数据请求和响应处理。
本文将详细介绍 graphel 的使用方法，包括安装、引入和常用 API 等，旨在帮助前端开发者更加高效和便捷地开发 GraphQL 应用程序。
安装
使用 npm 包管理器进行安装，输入以下命令即可：
npm install graphel
该命令将自动将 graphel 包下载到本地项目中，但是该包内并不包含任何图形查询。
引入
在项目中引入 graphel，首先需要在 JavaScript 文件中导入 graphel：
import graphel from 'graphel';
创建客户端
使用 graphel 创建一个客户端，我们可以使用 graphel.Client 函数。该函数需要一个配置对象作为参数，例如：
const client = new graphel.Client({
url: 'http://localhost:4000/graphql',
headers: {
Authorization: `Bearer ${token}`,
},
});上述代码中，我们创建了一个客户端实例，并将其连接到了一个 GraphQL 服务器。url 属性指定了该服务器的 URL 和端口，而 headers 属性则是可选项，通常用于授权的访问。
发送请求
在客户端实例上，我们可以使用 query 方法来发送 GraphQL 查询请求。例如：
-- -------------------- ---- -------
----- ----- - -
----- -
----- -
--
-----
------
-----------
--------------
-
-
--
----------------------------------- -- -
----------------------
---上述代码中，我们使用 query 方法来发送了一个 GraphQL 查询，该查询返回了所有图书的 ID、标题、作者、描述和发布日期信息。query 方法的参数是一个字符串，即 GraphQL 查询语句。
响应处理
当收到来自服务器的响应数据时，我们可以使用 response.body 属性来获取响应体数据，例如：
client.query(query).then((response) => {
console.log(response.body.data.books);
});上述代码中，我们在控制台输出了响应体数据中的 books 数组，即所有图书的详细信息。
总结
本文主要介绍了 graphel 的安装和引入方式，以及使用 graphel 与 GraphQL 服务器进行连接、发送请求和处理响应数据的方法。这些 API 可以帮助我们更加便捷和高效地开发 GraphQL 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606e81e8991b448de93d