简介
@playlyfe/gql 是一个开源的 JavaScript 库，用于在前端应用中方便地调用 GraphQL API。GraphQL 是一种 API 查询语言，它可以更加灵活、可扩展和高效地获取数据。这个库封装了基础的请求和响应处理，并提供了一些方便的 API 来调用 GraphQL 服务。本教程将介绍如何使用该库。
安装
首先，需要安装 npm 包：
--- ------- -------------
然后在需要的代码中导入：
------ --------- ---- ----------------
使用
接下来，我们来讲解如何使用 GQLClient 发起 GraphQL 请求。通常需要提供 GraphQL 服务地址和一个查询字符串。查询字符串将会被编译成一个 AST，并且可以被 GQLClient 对象解析。
----- ------ - --- -----------
---- ----------------------------------
---
----- ----- - -
----- ---------------------- ---- -
-------- -------- -
-------- -
--
----
-----------
-
-
-
--
------
------------- - ------- ------ --
----------- -- -
----------------------
--
------------ -- -
-------------------
---这个示例中，我们定义了一个查询字符串，它获取了用户的项目列表。在调用 GQLClient 实例的 query 方法时，我们提供了一个变量对象。这些变量将被用来填充查询字符串中的占位符。
响应
GQLClient 的 query 方法返回一个 Promise，它解析为一个对象，包含了服务端的响应。响应对象包含一个 data 属性，该属性包含了服务端返回的数据。如果服务端返回了错误消息，响应对象还有一个 errors 属性，该属性包含了错误信息。
-
------- -
------- -
----------- -
- ----- ------- ------- -------- --- -------------- ------ ----- ----- --- ----- --
- ----- ------- ------- -------- --- -------------- ------------ ---------- ----- --
- ----- ------- ------- -------- --- -------------- ---- -- ------- ------ ---------- -- ------ -- ------ ----- ------- -
-
-
--
--------- --
-错误处理
如果服务器返回了错误，响应对象将包含一个 errors 属性，该属性包含一组错误信息。这些错误信息是一个数组，每个元素都包含一个 message 属性，其中包含了错误消息的具体内容。
-
------- -----
--------- -
- ---------- -------- ------------ -
-
-为了处理这些错误，我们应该使用 JavaScript Promises 的异常处理机制。将 then() 链替换为 catch() 链，以响应错误。
------
------------- - ------- ------ --
----------- -- -
----------------------
--
------------ -- -
---------------------------
---结论
用 @playlyfe/gql 包在前端应用程序中调用 GraphQL API 很容易。该包封装了基础请求和响应处理，并提供了许多方便的 API 来调用 GraphQL 服务。这个教程应该让你对如何使用 GQLClient 有了一个很好的了解。希望你能够在你的项目中应用这个库并取得成功。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/196083