GraphQL 已成为现代 Web 应用程序中的一个热门技术。它是一种强类型查询语言，用于定义 API 中的数据结构。GraphQL 使得开发人员能够以一种灵活而强大的方式访问和操纵数据。在本文中，我们将探讨如何将 GraphQL 集成到现有项目中，并提供有用的示例代码以便深入学习。
GraphQL 简介
GraphQL 是一个由 Facebook 开发的开源查询语言和运行时。GraphQL 的一个关键概念是查询。查询可以是读取也可以是写入。查询定义了一个可执行的解析树，该解析树可以映射到现有的数据源以检索所需的数据。GraphQL 还有一些其他概念，如变量和片段，这些概念可以让查询更加可重用和可读。
GraphQL 的优点：
- 更少的 API 调用：由于 GraphQL 可以获取多个数据源的数据，因此在单个查询中处理此数据显然会减少使用的 API 调用数量。
- 可重用性：可以更轻松地重用查询，并轻松将其应用于多个数据源。
- 直观：GraphQL 提供了由开发人员定义的清晰且易于理解的结构。
GraphQL 如何与现有项目集成
在我们深入学习如何集成 GraphQL 到现有项目中之前，让我们简要了解 GraphQL 的一些基本组件：
- schema：GraphQL 的 schema 是所有 API 查询的基础。
- resolver：resolver 的作用是将 GraphQL 查询映射到现有的数据源。
- query：查询用于检索数据，通常是从现有数据源中提取数据。
- mutation：如果您要向现有数据源中写入，则使用 mutation。
现在，您可以按照以下步骤将 GraphQL 集成到项目中：
第 1 步：创建 schema
首先，要在项目中使用 GraphQL，必须创建 schema。Schema 是定义 API 的基础，用于描述数据的结构。
以下是示例 Schema：
-- -------------------- ---- ------- ---- ------- - --- --- ----- ------- - ---- ----- - --------- ---------- - ---- -------- - ---------------- --------- -------- -
在上面的示例中，Product 包含 id 和 name 字段。Query 和 Mutation 每个都有一个操作，用于检索和写入 Product 数据。这就是最简单的 schema，但您可以根据自己的项目需求添加其他类型和操作。
第 2 步：创建 Resolver
因为 GraphQL 不知道如何从现有数据源中检索数据，所以需要一个 resolver。Resolver 是将 GraphQL 查询映射到现有数据源的构件。
以下是 resolver 的示例：
-- -------------------- ---- -------
----- --------- - -
------ -
--------- -- -- -
------ ----------------------
--
--
--------- -
----------- ------ ----- -- -
----- ---------- - -
----- ----------
--
------ -------------------------------
--
--
--在上面的示例中，Query 和 Mutation 分别具有一个 resolver，这些 resolver 将数据从 db.products 提取出来或将数据写入到该数据源中。
第 3 步：将 Schema 和 Resolver 与 GraphQL 服务器一起设置
现在，我们需要将 schema 和 resolver 绑定到 GraphQL 服务器上。可以使用任何基于 Node.js 的 GraphQL 服务器，但本文推荐使用 Apollo Server。
以下是示例代码：
-- -------------------- ---- ------- ----- - ------------ - - --------------------------------- ----- ------- - ------------------- ----- - -------------------- - - --------------------------------- ----- -------- - ---------------------- ----- --------- - ----------------------- ----- --- - ---------- -- ------ - ------ --- ---- --------- ----- ------ - ---------------------- --------- ---------- --- ----- ------ - --- -------------- ------ --- ------------------------ --- --- -- ----- --- ------ ------------ ----- ---- -- -- -- - ------------------- ----- -- -------------------------------- ---
在上面的代码中，首先创建了一个 schema，并将其与 resolver 绑定。然后，使用 Apollo Server 将 schema 绑定到 Express 应用程序上。最后，启动服务器并将端口设置为 4000。
结论
本文介绍了如何将 GraphQL 集成到现有 Web 应用程序中。我们学习了 schema、resolver、query 和 mutation 等 GraphQL 的基础知识，并使用示例代码演示了如何创建实现 GraphQL 服务器。通过本文，您现在可以开始将 GraphQL 集成到自己的 Web 项目中了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6773a5866d66e0f9aae5b51e