GraphQL 是一种比传统 REST API 更为灵活和高效的数据查询语言，当今前端开发中越来越受到欢迎。它可以帮助我们快速地定义数据模型和数据查询方式，并且让前端开发者更能够在数据交互方面发挥自己的专业技能。本文将为大家介绍如何使用 GraphQL 进行数据层的开发工作，内容详细且有深度和学习以及指导意义，同时还包含示例代码。
GraphQL 入门
GraphQL 是一种由 Facebook 开源的查询语言，它可以通过 API 查询端点来获取需要的数据。最初用于在 React 中管理数据，它已经成为现在多个语言和 Web 框架的标准了。GraphQL 的基本思想是将数据看做一个图形，然后定义查询这张图的方式。因此，我们在使用 GraphQL 进行数据查询时，只需要关注需要查询的数据的结构和字段即可，而不用关心后端是如何实现的。下面我们假设一个网络应用需要获取某个博客文章的所有评论，下面是一般 RESTful 查询方式的 URL 请求：
https://example.com/api/posts/1/comments
这里我们需要填写对应的文章 id，但我们并不清楚所需查询的评论具体有哪些字段。如果使用 GraphQL 则可以这样创建查询：
-- -------------------- ---- -------
----- ------------------------ ---- -
-------- -------- -
-------- -
--
----
------ -
--
----
-
-
-
-GraphQL 查询中可能包含多个查询方法。上面的例子中我们定义了一个名为 GetBlogComments 的查询函数，它需要传入文章的 id 以获取查询结果。这里我们定义一个变量 $postId，用来传递参数。GetBlogComments 查询中还包含了其他多个查询函数，比如 post 和 comments。通过 post 查询我们可以查询到当前文章的所有信息，比如标题、分类、作者等；通过 comments 查询我们可以获取到所有评论的数据信息。在这两个查询函数中，我们通过字段名来查询具体的数据字段。在上面的示例中，我们查询了评论的 id，text 和 author，同时也查询了作者的 id 和 name。
GraphQL 的优势
上面简单介绍了 GraphQL，接下来我们来了解一下 GraphQL 的一些优势：
灵活性
GraphQL 的最大优势是其灵活性。与传统的 REST API 不同，GraphQL 的查询结果可以精确地符合我们的需求。例如，在通过 REST API 获取数据时，如果要获取 User 某个属性的值，可能需要向服务器请求整个 User 对象，然后在本地提取出需要的属性；而在 GraphQL 中，则可以通过指定需要查询的属性，直接访问目标属性。
性能
在传统 REST API 中，当需要查询多个实体时，需要进行多个请求。每个请求都需要建立连接和验证身份，这将导致网络请求和效率变慢。在使用 GraphQL 进行数据查询时，则只会发起一次请求即可获取需要的全部数据。这样可以有效提高网络请求的效率。
可扩展性
GraphQL 旨在为未来的功能提供完整支持。它旨在构建一个强大的查询语言，可以轻松扩展，因此可以支持更多功能。GraphQL 还允许 API 的不同版本之间的平滑转换。
使用 GraphQL 进行数据查询
理解了 GraphQL 的概念和优势，我们可以考虑使用 GraphQL 进行数据查询。为了说明如何将 GraphQL 添加到您的应用程序，请考虑以下步骤：
1. 创建 GraphQL schema
在开始查询之前，我们需要定义数据模型和结构。GraphQL 使用 schema 来描述数据的结构和类型，它可以帮助我们了解可用的查询类型和可用的数据源。下面是一些示例代码：
-- -------------------- ---- ------- ---- ----- - --------- -------- - ---- ---- - --- --- ------ ------- ------- ------- - ---- ------ - --- --- ----- ------- ------ -------- -
在该模式中，我们定义了 Query 类型来公开所有书籍的 allBooks 这一个查询函数。其余两个类型为 Book 和 Author，这些类型定义了数据模型的字段。
注意 ! 表示类型不可为空。
2. 编写 GraphQL 查询
在了解了模式之后，我们可以开始编写查询语句。查询可以使用 GraphQL 中的一些特定的语法，我们可以通过它们指定期望的查询对象。下面是一些示例代码：
-- -------------------- ---- -------
----- -
---------- ---- -
----
----- -
-----
-
-
-------- -
-----
------ -
----
-
-
-该查询将获取 ID 为 1 的 Author 的 name，和所有 Book 的 title 和对应的作者 name 。
3. 定义 GraphQL 的 resolver
我们可以通过 resolver 来实现 GraphQL 查询，resolver 是一个命令式的查询处理程序，它可以根据查询的类型和输入来检索或计算数据。
-- -------------------- ---- -------
----- --------- - -
------ -
---------- -
------ ------
--
--------- ----- -
------ ------------- - -- ---
-
--
----- -
------------ -
------ ------------- - --- ------------- ---
-
--
------- -
------------- -
------ ------------- - --------- --------- ---
-
-
--在上面示例中，我们定义了 Query 解析器，allBooks 和 author 表示数据源中的两个不同实体。resolver 接收两个参数，第一个参数为父节点，本例中我们使用 _ 占位符将其跳过。第二个参数是由调用方传递的参数集合对象，其中查询参数会自动映射到这里。
Book 和 Author 的解析器类似。这些函数接收一个实体作为输入，并根据需要获取它们之间的关系。
4. 建立 GraphQL 服务器
通过使用以下命令，我们可以构建 GraphQL 的服务器：
-- -------------------- ---- ------- ----- - ------------ - - --------------------------------- ----- ------- - ------------------- ----- --- - ---------- ----- ------ - --- -------------- ------- --------- --- ------------------------ --- ---
在上面的示例中，我们使用了 apollo-server-express 和 express 并创建一个实例 server。然后，我们通过将应用程序中间件配置为 server 对象来将其连接到 express 服务器上。
接下来，我们可以在浏览器中访问 http://localhost:PORT/graphql 获取 GraphQL 服务器的 Playground 界面，即 GraphQL 的 Web 调试工具。
结论
我们已经了解了如何使用 GraphQL 进行数据层开发。在实际开发中，通过使用 GraphQL，可以帮助我们快速定义数据模型和查询方式，有效使用 API 资源。GraphQL 的重要性越来越受到前端开发者们的认可和关注，值得我们不断深入学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670886e5d91dce0dc8720b77