GraphQL 是一种用于 API 的查询语言，它可以帮助前端开发人员更好地管理和查询数据。在 Angular 中使用 GraphQL 构建 API 可以提高应用程序的效率和性能。本文将介绍如何在 Angular 中使用 GraphQL 构建 API。
什么是 GraphQL？
GraphQL 是一种用于 API 的查询语言，它由 Facebook 开发，可以帮助前端开发人员更好地管理和查询数据。GraphQL 允许开发人员通过发送一个包含所需数据的查询来准确地获取所需的数据，而不是获取整个数据集并在前端进行筛选。它还提供了一种类似于 RESTful API 的方式来定义和管理数据模型。
如何在 Angular 中使用 GraphQL？
在 Angular 中使用 GraphQL，需要使用一个称为 apollo-angular 的库。这个库提供了一些组件和服务，可以帮助我们在 Angular 应用程序中使用 GraphQL。
步骤 1：安装 apollo-angular
在使用 apollo-angular 之前，需要先安装它。可以使用以下命令来安装：
npm install apollo-angular apollo-angular-link-http graphql
步骤 2：创建 GraphQL 服务
在 Angular 应用程序中，可以使用 Apollo 服务来管理 GraphQL。在创建 Apollo 服务之前，需要定义一个 GraphQL API 的链接。可以使用 HttpLink 来创建链接。以下是一个示例：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- -----------------
------ - --------------- -------- - ---- ---------------------------
------ - ------------- - ---- ------------------------
-----------
-------- -
-------------
--------------
-
--
------ ----- ------------- -
------------
------- -------
--------- --------
- -
----- ---- - ----------------- ---- ------------------------------- ---
---------------
----- -----
------ --- ---------------
---
-
-在上面的示例中，我们创建了一个 GraphQLModule，并在其中创建了一个 Apollo 服务。在创建 Apollo 服务时，我们使用了 HttpLink 来创建一个链接，并将其传递给 Apollo。我们还创建了一个 InMemoryCache，它用于缓存数据。
步骤 3：定义 GraphQL 查询
在 Angular 应用程序中，可以使用 Apollo 服务来发送 GraphQL 查询。以下是一个示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- -----------------
------ --- ---- --------------
------------
--------- -----------
--------- -
---- --------------------------------
---- -------------------- -- ----- --------
---- -------------
------ ---------- -------
----- ---------------- ------
------
-
--
------ ----- ------------ -
----- --- - ---
------- - -----
------ ----
------------------- ------- ------- -
-----------
--------
------ ----
----- -
-----
-----------
-
-
--
-----------
-- ----- ------- -- -- -
------------ - --------
--------- - -----
--
----- -- -
------------ - ------
---------- - ------
-
--
-
-在上面的示例中，我们使用 Apollo 服务来发送一个 GraphQL 查询。我们使用 gql 函数来定义查询，并将其传递给 Apollo 服务的 query 方法。在查询成功时，我们将响应数据存储在组件的 data 属性中，并在组件模板中使用它来显示数据。
总结
在本文中，我们介绍了如何在 Angular 中使用 GraphQL 构建 API。我们使用了 apollo-angular 库来管理 GraphQL，并创建了一个 Apollo 服务来发送 GraphQL 查询。我们还定义了一个 GraphQL API 的链接，并使用 HttpLink 来创建它。最后，我们使用 gql 函数来定义 GraphQL 查询，并使用 Apollo 服务的 query 方法来发送它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663c5128d3423812e4a2cd7b