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