GraphQL 中如何使用 Express 进行服务端部署?

阅读时长 7 分钟读完

在开发 Web 应用程序时,服务端框架是至关重要的,因为它为前端提供了数据和逻辑。如果服务端框架无法处理数据和请求,那么整个应用程序将无法正常运行。因此,合适的服务端框架选择非常重要。

在此文章中,我们将会了解到如何在 GraphQL 中使用 Express 进行服务端部署。我们将介绍 GraphQL 和 Express 的基本概念,然后概述如何使用 Express 创建 GraphQL 服务器。接下来,我们将讨论如何使用 schema 和 resolver 来定义 GraphQL API,并最终通过示例代码完成服务端的部署。

GraphQL 和 Express 概述

GraphQL 是一种查询语言,它允许我们在单个 API 中请求需要的数据。GraphQL 可以与任何编程语言一起使用,具有良好的扩展性并将数据的抽象层从 API 中分离出来。GraphQL 允许开发人员设计灵活且易于维护的 API,并便于解决困难的查询问题。

Express 是一种轻量级的 Web 框架,它提供灵活且简单的方法来处理 HTTP 请求和响应。Express 可以与各种中间件一起使用并提供路由功能,这使得 Express 成为处理 API 请求的理想选择

使用 Express 创建 GraphQL 服务器

GraphQL 允许开发人员使用任何语言和框架来设计 API,我们将使用 Express 框架来创建 GraphQL 服务器。我们将首先安装必需的软件包和模块 - Express,graphql,express-graphql。

下面是使用 Express 创建 GraphQL 服务器的示例代码:

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

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

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

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

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

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

在此代码中,我们已经安装了必需的软件包,并定义了一个简单的 GraphQL schema。接下来,我们设置了 resolver 的 rootValue,该 resolver 可以响应来自 GraphQL 查询 hello 的请求。接下来,我们使用 Express 来设置中间件和路由,最后用 listen 语句启动服务器。

需要注意的是,我们在 app.use 路由中使用了 express-graphql 中间件来处理来自客户端的 GraphQL 请求,并将相关信息转发到 GraphQL schema 和 resolver 中。

使用 schema 和 resolver 定义 GraphQL API

现在我们已经通过 Express 设置了 GraphQL 服务器,我们将详细讨论如何使用 GraphQL schema 和 resolver 来定义 API。schema 文件定义了查询类型、输入类型和转换类型的规范。resolver 文件则负责实际处理来自客户端的查询并将其转换为响应数据。

在上一步中,我们使用了内联方式定义了 schema。现在我们将会使用独立文件定义 GraphQL schema。这将使 GraphQL API 的管理和扩展更加容易。schema 文件定义如下:

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

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

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

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

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

在此 schema 中,我们定义了 Course 的查询类型、参数类型和转换类型。我们还定义了 Mutation,该 Mutation 可以更新 Course 的话题。注意,我们还为每个 Course 属性定义了类型。

当前 schema 只是一个规范,我们还需要 resolver 来响应来自客户端的请求。让我们创建 resolver 文件并为每个查询和 mutation 实现逻辑。

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

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

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

在此代码中,我们很方便地使用了 Lodash 库来搜索和过滤 coursesData,用于实现查询逻辑。我们还定义了 updateCourseTopic() 函数来处理来自客户端的变更。注意,我们将 resolver 导出为一个对象,并将其用作 graphql() 函数的 rootValue。

最后,我们将服务端部署所有文件整合在一起。项目文件结构如下所示:

app.js 文件内容如下:

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

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

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

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

我们在此文件中引入了 schema.js 和 root.js,然后将其作为参数传递给 express-graphql 中间件。现在我们可以运行 app.js 文件,启动服务器并执行 GraphQL 查询。

如果您在本地运行该代码,则可以在浏览器中打开 http://localhost:4000/graphiql,打开 GraphiQL 界面进行测试。

总结

通过这篇文章,我们了解了如何使用 Express 框架为 GraphQL 创建服务器,如何使用 GraphQL schema 和 resolver 定义 API,以及如何使用 GraphQL 响应客户端请求。

GraphQL 具有普遍适用性,与所有编程语言和 Web 应用程序框架兼容。此外,使用 GraphQL 的优点之一是可以将数据抽象层从 API 中分离出来。这样,我们可以轻松扩展应用程序,保持 API 的简洁和易于维护。

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

纠错
反馈