什么是 graphql？
GraphQL是一种由Facebook开发的数据查询和操纵语言，它使得客户端应用程序能够精确地获取它们需要的数据而无需从服务器下载整个数据集。
GraphQL还具有优雅的数据查询结构，使得服务器端更容易编写，而客户端则更容易消费数据。GraphQL还具有强大的类型系统，这使得开发人员在编写代码时更加自信。
graphql-client 是什么？
graphql-client 是一个用于在前端使用GraphQL API的JavaScript库。它的目的是简化GraphQL API调用，并提供一个快速、可扩展的查询模板系统。
安装 graphql-client
使用 npm 安装 graphql-client:
npm install graphql-client
如何使用 graphql-client
首先，将客户端和GraphQL API Endpoint相连接，您应该创建一个GraphQLClient实例。GraphQLClient的构造函数接受一个对象，其中包含一个url键，该键包含一个GraphQL API服务器端点的URL。
const { GraphQLClient } = require('graphql-client')
const client = new GraphQLClient({
url: 'https://api.example.com/graphql'
})在我们开始构造查询之前，让我们简要了解一下GraphQL查询语言中的几个主要部分。
查询
查询是GraphQL中用于获取数据的结构。一个查询由字段和其相关参数组成。在运行查询时，只会返回该查询中指定的字段。
例如，下面的简单查询将获取单个用户的名字：
query {
user(id: 1) {
name
}
}变量
查询变量是可以在GraphQL查询中传递参数的一种方法。它们使您能够根据需要参数化查询，以便在多个场景中使用相同的查询。
例如，下面的查询将根据给定的用户ID查询用户的名字：
query UserInfo($id: Int) {
user(id: $id) {
name
}
}碎片
GraphQL片段是可以在GraphQL查询中重复使用的代码部分。它们使您能够共享复杂的查询逻辑，并将其分解为更可维护的组件。
例如，下面的片段获取用户的ID，名称和电子邮件：
fragment UserInfo on User {
id
name
email
}Mutation
Mutation用于修改数据，它们与查询类似，但支持更多的副作用和复杂的返回值语义。
下面的提示将使用所有这些查询构建一个更复杂的查询示例。
完整示例
现在让我们来看一个完整的示例，它将获取一个GitHub用户的登录和存储库数量。请注意，我们定义了一个名为 UserInfo 的片段并将其放在所有查询中使用。
-- -------------------- ---- -------
----- - ------------- - - -------------------------
----- ------ - --- ---------------
---- ---------------------------------
-------- -
-------------- ------- -------------------
-
--
----- ------------- - -
-------- -------- -- ---- -
-----
------------ -
----------
-
-
-
----- -------- - -
----- --------------- -------- -
----------- ------- -
-----------
-
-
----------------
-
------------------------ - ------ --------- --
---------- -- ------------------说明
此代码将与GitHub GraphQL API进行交互，并获取一个名为octocat的用户的登录和存储库数量。
我们首先使用GraphQLClient构造函数创建一个客户端实例。我们传递了一个URL和一个Authorization头文件来认证我们的API请求。
接下来，我们定义了一个GraphQL片段，它在所有我们将要写的查询中使用。我们将它称为UserInfo，它将在查询GitHub API时获取用户的登录和存储库数量。
接下来，我们定义了一个名为GetUser的查询，它接受一个名为登录的字符串变量。这是我们将要执行的查询。
在GetUser查询的主体中，我们使用了一个称为…UserInfo的片段。这确保了用户的登录和存储库计数在查询中是可用的。
最后，我们使用GraphQL客户端实例的请求方法开始查询。我们传递了我们定义的查询和一个名为Login的变量。
总结
graphql-client是一个非常有用的库，可用于在前端应用程序中使用GraphQL API。它提供了一个简单的API，可以轻松地构建查询和变量，并使处理GraphQL查询变得非常容易。
如果您要开始使用GraphQL，那么 graphql-client绝对是您应该考虑的一个库！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac27b5cbfe1ea0610957