GraphQL 是一种用于 API 的查询语言，它提供了一种更高效、更强大的方式来获取数据。而 Apollo GraphQL 是一个流行的 GraphQL 客户端，它提供了许多有用的功能，如缓存、错误处理和类型检查等。在本文中，我们将介绍如何在 Angular 中使用 Apollo GraphQL，以便更好地管理和查询数据。
安装 Apollo GraphQL
在使用 Apollo GraphQL 之前，我们需要先安装它。可以通过 npm 命令来安装：
npm install apollo-angular apollo-angular-link-http apollo-link apollo-client graphql-tag graphql
这些包包括了 Apollo GraphQL 的核心库和 Angular 的适配器，以及一些必要的依赖。
创建 Apollo GraphQL 服务
在 Angular 中，我们可以使用服务来管理 Apollo GraphQL。我们需要创建一个服务来处理 GraphQL 查询，并将其注入到组件中。以下是一个示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------ - ---- -----------------
------ - -------- - ---- ---------------------------
------ - ---------- - ---- --------------
------ - ------------- - ---- ------------------------
------ --- ---- --------------
-------------
----------- -------
--
------ ----- -------------- -
------------------- ------- ------- ------- --------- --------- -
----- ---- - ----------------- ---- --------------------------------- ---
----- -------------- - --- ---------------------- -------- -- -
----------------------
-------- -
-------------- ------- ----------------------------------
--
---
------ -------------------
---
---------------
----- ----------------------------
------ --- ----------------
---
-
------------ ------- -
------ -------------------
------ ----
--------
--
---
-
---------------- ------- ----------- ---- -
------ --------------------
--------- ----
-----------
--
----------
---
-
-在上面的代码中，我们创建了一个名为 GraphQLService 的服务。在构造函数中，我们创建了一个 HttpLink 对象，用于发送 GraphQL 查询到我们的 API。接下来，我们创建了一个 authMiddleware 中间件，用于在每个请求中添加身份验证头。最后，我们使用 apollo.create 方法创建了一个 Apollo GraphQL 客户端，它包含了我们的 http 和 authMiddleware 链接，以及一个内存缓存。
我们还定义了两个方法 query 和 mutate，分别用于查询和变更数据。这些方法接受一个 GraphQL 查询或变更字符串，并返回一个可观察对象，它包含了我们的查询结果或变更结果。
在组件中使用 Apollo GraphQL
现在我们已经创建了一个 Apollo GraphQL 服务，我们可以将其注入到我们的组件中，以便使用它来查询和变更数据。以下是一个示例：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -----------
--------- -
---- --------------------------------
---- ---------------- ----- --------
----
--- ----------- ---- -- -------
-- --------- --
-----
-----
--
--
------ ----- ------------ ---------- ------ -
------- - -----
------ -------
------ ------
------------------- --------------- --------------- --
---------- -
-------------------
--------
-
----- -
----
-
-
--
-----------
-- ----- ------- -- -- -
---------- - -----------
------------ - --------
--
-- ------- -- -- -
---------- - --------
------------ - ------
-
--
-
-在上面的代码中，我们注入了我们的 GraphQLService 服务，并在 ngOnInit 方法中使用它来查询用户数据。我们使用 *ngIf 指令来显示加载状态和错误信息，并使用 *ngFor 指令来循环显示每个用户的名称。
结论
在本文中，我们介绍了如何在 Angular 中使用 Apollo GraphQL。我们首先安装了 Apollo GraphQL 和相关依赖，然后创建了一个服务来处理 GraphQL 查询，并将其注入到组件中。最后，我们展示了如何在组件中使用 Apollo GraphQL 来查询和变更数据。希望这篇文章可以帮助你更好地了解和使用 Apollo GraphQL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67638f49856ee0c1d4200af4