GraphQL 简介
GraphQL 是一种用于 API 的查询语言，是一种用于服务端与客户端之间进行数据交互的技术，它可以让客户端告诉服务端需要的数据，从而避免了无用的数据交互。GraphQL 是 Facebook 在 2012 年发布的一项技术，并在 2015 年正式开源，目前已经成为了前端开发中很重要的一部分。
服务端的实现
GraphQL 服务端的实现依赖于各种框架，如 Node.js 的 Express、Koa、Rocktql 等。在实现 GraphQL 服务端的时候，需要考虑到以下几个问题：数据定义，查询和数据响应。
数据定义
GraphQL 允许开发者通过定义 Schema 来规定数据的交互方式。它可以定义 Query、Mutation 和 Subscription 三种操作类型和相应的返回对象。对于每种操作类型，需要定义对应的参数和返回值，并且可以添加验证器和默认值等信息。
GraphQL 的 Schema 定义基于 GraphQL 语言，它使用类型来描述数据以及数据的交互方式。例如，如果我们想定义一个查询用户列表的 API，我们可以定义如下类型：
-- -------------------- ---- ------- ---- ---- - --- --- ----- ------- ---- --- - ---- ----- - ------ ------- -
在这个例子中，我们定义了一个 User 类型，它有 id、name 和 age 三个字段，其中，id、name 字段是必需的，而 age 是可选的。Query 类型定义了所有可用的查询操作，这里只定义了一个 users 查询，它会返回一个包含 User 类型数据的数组。
查询
GraphQL 使用 Query 语言发起请求，通过指定 Query 的名称和参数来获取数据。查询的参数为 JSON 格式的键值对，其 Key 为定义的参数，Value 为参数的值。
下面是一个使用 GraphQL 发起查询的例子：
query getUsers {
users {
id
name
age
}
}在这个例子中，我们定义了一个名为 getUsers 的 Query 请求，它会获取所有用户的 id、name 和 age 三个字段。
数据响应
GraphQL 的服务端处理查询后，会返回一个 JSON 格式的数据。这个 JSON 数据与查询时请求的字段相对应，可以包含完整的数据，也可以只包含部分数据。如果请求的数据结构不正确，服务端会返回一个错误信息，告诉客户端出现了哪些问题。
下面是一个使用 GraphQL 查询时返回的数据示例：
-- -------------------- ---- -------
-
------- -
-------- -
-
----- ----
------- --------
------ --
--
-
----- ----
------- ------
------ --
-
-
-
-客户端的实现
在客户端中使用 GraphQL 可以通过各种框架和库来实现，如 React、Vue、Angular 等。GraphQL 客户端使用 Query 语言与服务端进行交互，根据服务端定义的 Schema 发起请求，并接收服务端的响应。
使用 Apollo Client 实现客户端
Apollo Client 是用于 React 的 GraphQL 客户端库，它可以与 GraphQL 服务端进行交互，发送请求并接收响应。使用 Apollo Client 实现 GraphQL 客户端的步骤如下：
- 安装依赖包
npm install apollo-boost react-apollo graphql-tag
- 创建一个 Apollo Client 实例
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: 'http://localhost:4000/graphql',
});- 发送请求
-- -------------------- ---- -------
------ - --- - ---- --------------
------ - ----- - ---- ---------------
----- ----------- - ----
----- -
----- -
--
----
---
-
-
--
----- --------- - -- -- -
------ --------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ ------------------- -- -
---- --------------
------------------
-----------------
------
---
--
--------
--总结
在本文中，我们介绍了 GraphQL 服务端和客户端如何一起工作。服务端可以通过定义 Schema 来规定数据的交互方式，而客户端可以使用 Apollo Client 实现 GraphQL 客户端，并使用 Query 发起请求，并接收服务端的响应。GraphQL 的服务端和客户端在实际开发中提供了很多便利，值得开发者们深入研究。
参考
- GraphQL | A query language for your API
- Apollo Client | A fully-featured, production ready caching GraphQL client
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64505643980a9b385b968f29