GraphQL 是一种 API 查询语言，它能够让我们更加灵活地请求数据，从而提高了 Web 应用程序的开发效率。然而，当需要频繁地发出 GraphQL API 请求时，手动封装每个请求将会变得极其冗长和繁琐，带来不必要的代码复杂性。本文将简单介绍如何通过封装 GraphQL API 调用方法来优化前端代码，减少工作量，从而简化开发流程。
GraphQL API 基础知识
在深入了解如何封装 GraphQL API 调用方法之前，我们需要对 GraphQL 基本概念有所了解。
定义查询
GraphQL API 是一种基于类型和字段的查询语言。语法类似于 JSON，每个具体的数据都是通过一种称为“Resolver”的函数来实现的。
例如一个查询用户信息的 GraphQL 查询：
query {
user(id: "123") {
name
age
email
}
}这个查询名称为 "user"，使用了参数"id"，类型为字符串并带有字段 "name"、"age" 和 "email"。该示例将在字段“name”中请求用户的姓名。
定义突变
GraphQL 也支持利用“突变”来实现向 API 服务器推送数据：
mutation {
updateUser(id: "123", name: "Frank", age: 25, email: "frank@mail.com") {
name
age
email
}
}类似于查询查询，我们可以使用“突变”来更新或添加数据，然后返回结果。
封装 GraphQL API 调用方法
封装请求 GraphQL API 的方法可以避免反复编写重复的代码，并将代码集中在一处以便于维护。
以下示例是利用 GraphQL Request 库封装的完整 GraphQL API 请求方法：
-- -------------------- ---- -------
------ - ------------- - ---- -----------------
----- ------ - --- -------------------------------------------
------ ----- ------- - ----- ------- --------- - --- -- -
--- -
----- ---- - ----- --------------------- ----------
------ ----
- ----- --- -
--------------
-
-我们将GraphQLClient实例化并将我们封装的方法request暴露出去。request接受两个参数，第一个参数是查询或突变语句，第二个参数是变量。在GraphQL中，我们可以在查询或突变语句中定义可变的参数。在此例中，我们使用第二个参数来动态传递此类变量。
示例
以下是如何使用我们刚刚封装的 GraphQL API 请求方法实现调用一个查询：
-- -------------------- ---- -------
----- ----- - -
----- ---------------- -------- -
-------- -------- -
----
---
-----
-
-
-
----- --------- - -
------- -----
-
-------------- -------------------- -- -
-----------------
--上面的示例中，我们声明了一个名为 “getHero” 的查询。查询具有变量 $heroId，它是字符串类型。我们将这个变量传递给GraphQL API请求的第二个参数variables。然后将返回的结果打印到控制台中。
结论
GraphQL 是一种流行的 API 技术，可以提高 Web 应用程序的开发效率。对于频繁发送 GraphQL API 请求的场景，封装查询和突变方法可节省工作量。
我们可以通过封装调用GraphQL API的方法来避免重复编写代码，并在维护时更轻松地维护。我们还看到了一个使用GraphQL Request 封装的语法示例。
希望本文对你了解GraphQL和封装GraphQL API调用方法有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670126470bef792019b299d4