Express.js 中使用 GraphQL 实现 API 的方法及最佳实践

阅读时长 8 分钟读完

介绍

GraphQL 是一种 API 查询语言,它提供了一种更加强大、灵活、高效的方式来获取 API 数据。在 Express.js 中使用 GraphQL,可以简化 API 查询的过程,提高 API 的性能,同时也提供了更好的灵活性,使得开发者可以轻松地实现客户端所需的数据。

本文将介绍在 Express.js 中使用 GraphQL 实现 API 的方法及最佳实践,包括基本的 GraphQL 概念、如何安装和配置 GraphQL、如何定义 GraphQL 查询、以及如何在 Express.js 中使用 GraphQL。

GraphQL 概览

GraphQL 旨在为客户端提供所需的精确数据,并减少冗余的数据传输量。GraphQL 通过定义数据查询语言来实现这个目标。GraphQL 查询语言是基于类型系统的,该类型系统描述了查询中可用的可执行单元。

GraphQL 具有以下优点:

  • 灵活性:通过使用 GraphQL,客户端可以获取任意数量和类型的数据,而不需要多次调用不同的 API。
  • 性能:GraphQL 可以限制查询结果的数据量,从而提高 API 的性能。
  • 可维护性:GraphQL 允许 API 所有者根据客户端需求的变化来更改 API 结构,从而使 API 更容易维护。

安装和配置 GraphQL

要在 Express.js 中使用 GraphQL,我们首先需要安装并配置 GraphQL。通过以下命令安装 graphql 和 express-graphql:

在安装了这两个包之后,我们需要在 Express.js 中设置 GraphQL 中间件,以处理 GraphQL 查询请求。我们可以使用以下代码创建一个 Express.js 应用程序并设置 GraphQL 中间件:

-- -------------------- ---- -------
----- ------- - -------------------
----- - ----------- - - ---------------------------

----- --- - ----------

------------------- -------------
  ------- -- ------- -------
  ---------- -- ---- ---------
  --------- -----
----

---------------- -- -- -
  ------------------- ------- -- ---- -------
---

在上面的代码中,我们使用 Express.js 的 graphqlHTTP 中间件来处理 GraphQL 请求。我们需要向中间件传递一个名为 schema 的参数,该参数是我们定义的 GraphQL schema,以及一个名为 rootValue 的参数,该参数是解析器的根级别对象。

最后,将 graphiql 设置为 true 可以访问 GraphiQL IDE,这是一个交互式的 GraphQL 查询编辑器,可以帮助我们在浏览器中处理查询。

定义 GraphQL 查询

要使用 GraphQL 在 Express.js 中实现 API,我们需要定义 GraphQL 查询。GraphQL 查询由多个字段组成,每个字段都附带有一些属性,例如名称、类型和参数。GraphQL 查询使用类似于 JSON 格式的语法,这使得它们易于阅读和编写。

下面是一个简单的 GraphQL 查询的例子:

在这个查询中,我们请求名为 user 的字段,并使用 id 参数来指定用户的 ID。用户的 ID、名称和电子邮件是我们希望获取的数据。查询的结果将返回符合条件的用户信息。

在 Express.js 中使用 GraphQL

在 Express.js 中使用 GraphQL,我们需要按照以下步骤进行操作:

定义 GraphQL schema

要在 Express.js 中使用 GraphQL,我们需要定义一个 GraphQL schema。GraphQL schema 是 GraphQL API 的元数据,描述了查询和类型之间的关系。GraphQL schema 是基于 GraphQL 类型系统定义的,包括类型、字段和查询。下面是一个示例 GraphQL schema:

-- -------------------- ---- -------
----- - ----------- - - -------------------

----- ------ - -------------
  ---- ---- -
    --- ---
    ----- -------
    ------ -------
  -

  ---- ----- -
    ----------- ----- ----
  -
---

-------------- - -------

在上面的代码中,我们定义了名为 User 的类型和 Query 类型,使用 Query 类型来定义获取用户信息的查询,getUser(id: ID!)。我们可以通过调用 buildSchema() 方法来创建 GraphQL schema。

定义 GraphQL resolver

在定义了 GraphQL schema 之后,我们需要定义一个 GraphQL resolver。GraphQL resolver 是用于处理客户端查询的函数,它们是基于 GraphQL schema 定义的,负责检索客户端所需的数据。下面是一个示例 GraphQL resolver:

在上面的代码中,我们定义了一个名为 users 的数组,该数组包含了所有用户的信息。然后,我们定义了一个名为 rootValue 的对象,该对象包含了我们的 resolver,getUser({ id }),该函数返回符合条件的用户信息。

设置 GraphQL 中间件

在定义了 GraphQL schema 和 resolver 之后,我们需要在 Express.js 中设置 GraphQL 中间件,以便处理客户端查询请求。可以使用以下代码设置 GraphQL 中间件:

-- -------------------- ---- -------
----- ------- - -------------------
----- - ----------- - - ---------------------------
----- ------ - --------------------
----- --------- - ----------------------

----- --- - ----------

------------------- -------------
  -------
  ----------
  --------- -----
----

---------------- -- -- -
  ------------------- ------- -- ---- -------
---

在上面的代码中,我们使用 Express.js 的 graphqlHTTP 中间件来处理 GraphQL 请求。我们将 schema 和 rootValue 传递给中间件,并设置了 graphiql 为 true,以便在浏览器中调试查询。

执行 GraphQL 查询

请求一个 GraphQL API 的方式与请求任何其他 API 的方式非常相似。客户端只需将 GraphQL 查询作为标准 HTTP POST 请求的一部分发送到服务器,并在请求正文中包含查询字符串。

下面是一个使用 axios 发送 GraphQL 查询的例子:

-- -------------------- ---- -------
----- ----- - -----------------

------------------------------------------- -
  ------ -
    ----- -
      ----------- -- -
        --
        ----
        -----
      -
    -
  --
----------- -- -
  ----------------------
------------ -- -
  -------------------
---

在上面的代码中,我们使用 axios 发送 GraphQL 查询。查询包含 getUser(id: 1) 查询,并返回与该查询匹配的用户信息。查询结果将由 res.data 返回,可以处理它来获取所需的数据。

最佳实践

在使用 GraphQL 在 Express.js 中实现 API 时,以下是一些最佳实践:

  • 分离 schema 和 resolver:将 GraphQL schema 定义和 resolver 分离到不同的文件中,有助于提高代码的可读性和可维护性。
  • 使用 DataLoader:DataLoader 可以帮助我们自动地批量化多个查询,减少 API 的负载和提高查询性能。
  • 缓存查询结果:使用缓存可以减少查询次数,提高 API 性能和响应时间。
  • 对查询进行合理分页:对查询进行合理分页是必要的,可以在查询期间减少数据传输量,提高 API 性能,同时也降低了内存使用量。

结论

GraphQL 是一种非常有用的 API 查询语言,在 Express.js 中使用 GraphQL,可以减少 API 的冗余数据传输量,提高 API 的灵活性和性能。在使用 GraphQL 时,我们需要定义 GraphQL schema 和 resolver,以及使用 GraphQL 中间件处理客户端查询请求。

本文介绍了如何在 Express.js 中使用 GraphQL 实现 API 的方法及最佳实践,包括基本的 GraphQL 概念、如何安装和配置 GraphQL、如何定义 GraphQL 查询,以及如何在 Express.js 中使用 GraphQL。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67173ef4ad1e889fe220807f

纠错
反馈