前言
作为一名前端开发人员，我们经常要在 Web 应用中使用 GraphQL 来获取数据。NestJS 框架是一个基于 Node.js 的 Web 开发框架，利用 TypeScript 和面向对象编程的方式来构建 Web 应用程序。这篇文章将会介绍如何在 NestJS 框架中使用 GraphQL 构建 Web 应用程序。
准备工作
在开始之前，我们需要先安装一些必要的工具。首先，我们需要安装最新版本的 Node.js 和 npm。然后，我们需要安装 NestJS CLI 工具，可以通过以下命令进行安装：
npm i -g @nestjs/cli
创建一个新的 NestJS 项目：
nest new my-app
这个命令将会创建一个默认模板的 NestJS 项目。然后，我们需要安装一些必要的包：
npm i --save @nestjs/graphql graphql apollo-server-express
安装完成之后，我们需要在 app.module.ts 中配置 GraphQL 模块：
-- -------------------- ---- -------
------ - ------ - ---- -----------------
------ - ------------- - ---- ------------------
---------
-------- -
-----------------------
--------------- -----------------
---
--
--
------ ----- --------- --这个配置会生成一个 GraphQL Schema，并将其保存到 src/schema.gql 文件中。
创建一个 GraphQL 解析器
我们需要创建一个 GraphQL 解析器类，该类将用于解析 GraphQL 请求并返回数据。我们可以通过使用 @Resolver() 装饰器来创建一个解析器类。例如：
-- -------------------- ---- -------
------ - ------ -------- - ---- ------------------
------------------
------ ----- ------------- -
--------- -- -------
------- -
------ ------ --------
-
-上述代码中，我们创建了一个名为 HelloResolver 的解析器类。该类有一个 hello() 方法，该方法将返回一个字符串 "Hello World!"。我们在方法上使用了 @Query() 装饰器，使其能够被 GraphQL 调用。
创建 GraphQL 查询
在上一步中，我们创建了一个 GraphQL 解析器类。现在，我们需要创建一个 GraphQL 查询，以便客户端能够调用我们的解析器来获取数据。我们可以使用 @Query() 装饰器创建一个 GraphQL 查询。例如：
-- -------------------- ---- -------
------ - ------ -------- - ---- ------------------
------------------
------ ----- ------------- -
--------- -- -------
------- -
------ ------ --------
-
--------- -- -------
----- --------------------------- ----- ------- -
------ ------ ----------
-
-上述代码中，我们创建了一个名为 helloWithName() 的查询，该查询有一个名为 name 的参数。在方法体中，我们返回了一个字符串，该字符串会包含传递的参数。我们在方法上使用了 @Args() 装饰器，使其能够接收 GraphQL 查询传递的参数。
发布 GraphQL API
我们现在已经创建了一个 GraphQL 解析器和一个 GraphQL 查询。现在，我们需要将其发布到 Web 服务器上，以便客户端可以使用它。我们可以使用 NestJS 的 @Controller() 和 @Query() 装饰器来实现这一点。
-- -------------------- ---- -------
------ - ----------- ----- - ---- -----------------
------ - ------------- - ---- -------------------
-------------
------ ----- ------------- -
------------------- -------------- -------------- --
--------- -- -------
----- ------- -
------ ---------------------------
-
--------- -- -------
----- --------------------------- ----- ------- -
------ ---------------------------------------
-
-在上述代码中，我们创建了一个名为 AppController 的控制器类。该类有两个 GraphQL 查询，分别是 hello() 和 helloWithName()。这两个查询调用了我们的 HelloResolver 类中的方法。
我们需要将控制器类导出，并将其挂载到 NestJS 应用程序中：
-- -------------------- ---- -------
------ - ------ - ---- -----------------
------ - ------------- - ---- ------------------
------ - ------------- - ---- -------------------
------ - ------------- - ---- -------------------
---------
-------- -
-----------------------
--------------- -----------------
---
--
------------ ----------------
---------- ----------------
--
------ ----- --------- --在 app.module.ts 文件中，我们将控制器类和解析器类导入到 providers 数组中，使其能够被应用程序使用。
测试 GraphQL API
我们已经创建了一个 GraphQL 解析器和一个 GraphQL 查询，并将其发布到 Web 服务器上。现在，我们需要测试它是否正常工作。我们可以使用 Postman 或类似的工具来测试 GraphQL API。以下是一个测试查询：
query {
hello
}该查询将返回以下结果：
{
"data": {
"hello": "Hello World!"
}
}我们可以使用以下查询来测试带参数的查询：
query {
helloWithName(name: "Alice")
}该查询将返回以下结果：
{
"data": {
"helloWithName": "Hello Alice!"
}
}总结
在本文中，我们学习了如何在 NestJS 中使用 GraphQL 构建 Web 应用程序。我们创建了一个 GraphQL 解析器和一个 GraphQL 查询，并将其发布到 Web 服务器上。最后，我们测试了我们的 GraphQL API 是否正常工作。GraphQL 可以帮助我们更好地管理我们的 Web 应用程序，并使开发过程更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a92c6848841e9894574acc