在现代的 Web 应用程序开发中，使用 API 驱动的架构方式已经成为了必然的趋势。而 Angular 是一款非常流行的前端框架，而 GraphQL 则是一种更加高效和灵活的数据查询语言。本文将介绍如何使用 Angular 和 GraphQL 构建 API 驱动的应用程序，并提供实际的步骤和技巧。
为什么要使用 Angular 和 GraphQL？
使用 Angular 和 GraphQL 可以带来很多好处，包括：
- 极大的提高开发效率和代码质量。
- 可以更加灵活地处理数据。
- 更方便的调用 API 服务。
- 完善的类型检查和编译时错误检查功能。
步骤一：创建 Angular 应用程序
第一步是创建一个 Angular 应用程序。对于熟悉 Angular 的开发人员来说，这应该不会是什么难事。可以使用 Angular CLI 工具来完成这个任务，只需要运行以下命令即可快速创建一个新的应用程序：
ng new my-app
执行完毕后，进入创建的应用程序的目录，运行以下命令来启动应用程序：
cd my-app ng serve
现在应用程序已经成功运行，并且可以在浏览器中查看到。在接下来的步骤中，我们将会使用 GraphQL 来实现 API 服务端。在实际的应用程序中，你需要使用合适的 API 实现，例如 REST API 等。
步骤二：添加 GraphQL 支持
Angular 中使用 GraphQL 的方式非常简单。我们只需要使用 apollo-angular 包来添加 GraphQL 支持，并在应用程序中进行配置即可。
首先，我们需要安装 apollo-angular 包：
npm install --save apollo-angular apollo-angular-link-http apollo-client graphql
然后，我们需要配置应用程序，使其能够使用 GraphQL。在 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
-- ------ ------
------ - ---------------- - ---- -----------------------
------ - ------------- ------ - ---- -----------------
------ - --------------- -------- - ---- ---------------------------
------ - ------------- - ---- ------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-------------
--------------
--
---------- ---
---------- --------------
--
------ ----- --------- -
------------------- ------- ------- ------- --------- --------- -
--------------------
----- ---------------------- ---- ----------------------- ---
------ --- ---------------
---
-
-在这段代码中，我们创建了 Apollo Client，并将其绑定到了应用程序的根模块中。可以看到，我们需要传递一个 link 和一个 cache，其中 link 表示我们需要连接的 GraphQL 服务端的地址，而 cache 则是 Apollo Client 的缓存空间。
步骤三：编写 GraphQL Schema
在使用 GraphQL 构建 API 服务端之前，我们需要编写一个 GraphQL Schema。在这个 Schema 中，定义了我们的 API 的查询和修改操作。这个 Schema 中包含了数据的类型和字段，以及操作所需的参数和返回类型。
例如，下面的代码定义了一个名为 Hello 的查询操作：
type Query {
Hello: String
}在实际应用程序中，Schema 中可能会包含很多的查询和修改操作，所以需要根据实际需求进行定义。
步骤四：编写 Resolvers
GraphQL 的 Resolver 相当于搭起了查询和数据源之间的桥梁。Resolver 的任务就是在应用程序中查询数据，并返回给客户端。在 Resolver 中可以使用任何可以获取到数据的方式，例如从数据库、API 服务等获取数据。
例如，下面的代码定义了一个名为 Hello 的 Resolver：
const resolvers = {
Query: {
Hello: () => 'Hello!'
}
}在这个 Resolver 中，我们直接返回了一个字符串 Hello!，但是在实际应用程序中，我们可能需要从数据库或者 API 中查询数据，并将结果返回给客户端。
步骤五：创建 GraphQL 服务端
使用 Apollo Server 来创建 GraphQL 服务端，它可以使我们很方便地构建 GraphQL API。我们只需要创建一个 HTTP 服务器，并提供一个 GraphQL Schema 和一组 Resolver 函数即可。
以下是如何创建一个 GraphQL 服务端的示例代码：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------------------ ------ - -------- - ---- ----------- ------ - --------- - ---- -------------- ------ ------- ---- ---------- ----- --- - ---------- ----- ---- - ----- ----- ------ - --- -------------- --------- --------- --- ------------------------ --- --- ------------ ---- -- -- -- ------------------- ----- -- ----------------------------------------------- --
在这段代码中，我们首先创建了一个 Express HTTP 服务器，并设置了端口号为 4000。然后，我们创建了一个 Apollo Server，并将 GraphQL Schema 和 Resolver 传递给了它。最后，我们将 Apollo Server 的中间件应用到了 Express 服务器上，并启动服务器。
步骤六：测试 GraphQL API
在完成了以上步骤之后，我们就可以通过 GraphiQL 或者其他的 GraphQL 客户端来测试我们的 API 服务端了。
以下是一个 GraphiQL 示例：
我们可以看到，在返回数据的同时 GraphiQL 还提供了丰富的文档和自动补全功能，使我们方便地查询数据。
结论
通过本文，我们了解了如何使用 Angular 和 GraphQL 构建 API 驱动的应用程序。其中，我们使用了 Apollo Client 和 Apollo Server 帮助我们快速地搭建了一个基于 GraphQL 的 API 服务端，并使用 TypeScript 等技术增强了代码的可读性和可维护性。如果你正在寻找一种优秀的 API 架构方式，那么不妨尝试一下 Angular 和 GraphQL！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671080235f551281026b9bf1