GraphQL 是一种用于 API 的查询语言，它的出现使得前端开发者更容易地获取所需的数据。在 Angular 应用中使用 GraphQL 可以让我们更加高效地获取和管理数据。本文将介绍如何在 Angular 应用中使用 GraphQL，并提供详细的示例代码和指导意义。
什么是 GraphQL？
GraphQL 是一种由 Facebook 开发的查询语言，它允许我们在一个 API 中定义我们需要的数据。与传统的 RESTful API 不同，GraphQL 可以让客户端精确地指定所需要的数据，避免了过度获取或不足的情况。GraphQL 还支持多个查询，可以在一个请求中获取多个资源。
安装 Apollo 客户端
在 Angular 应用中使用 GraphQL，我们需要使用 Apollo 客户端。Apollo 客户端是一个开源的 GraphQL 客户端，它提供了丰富的工具集和生命周期方法，使得我们可以更容易地管理 GraphQL 查询。
首先，我们需要安装 Apollo 客户端。在终端中运行以下命令：
npm install apollo-angular apollo-angular-link-http apollo-client graphql
配置 Apollo 客户端
在 Angular 应用中配置 Apollo 客户端非常简单。我们只需要在 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- -----------------------
------ - ------------- ------ - ---- -----------------
------ - --------------- -------- - ---- ---------------------------
------ - ------------- - ---- ------------------------
-----------
-------- -
--------------
-----------------
-------------
--------------
-
--
------ ----- --------- -
------------
------- -------
--------- --------
- -
---------------
----- ----------------- ---- --------------------------------- ---
------ --- ---------------
---
-
-在这段代码中，我们创建了一个 Apollo 客户端，并将其配置为使用我们的 GraphQL API。在这个例子中，我们使用了一个名为 https://api.example.com/graphql 的 GraphQL API。你需要替换这个 URL 为你自己的 GraphQL API。
创建 GraphQL 查询
现在我们已经配置了 Apollo 客户端，接下来我们需要创建一个 GraphQL 查询。在 Angular 应用中，我们可以使用 apollo-angular 库中的 Apollo 服务来创建查询。以下是一个简单的查询示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- -----------------
------ --- ---- --------------
------------
--------- -----------
--------- -
---- ----------- ---- -- ----- - -------
-- --------- --
------
-
--
------ ----- ------------ -
------ ----------------
------------------- ------- ------- -
---------- - ------------------------
------ ----
----- -
----- -
----
-
-
-
---------------------
---------- -- ------------------
--
-
-在这个例子中，我们使用 Apollo 服务创建了一个查询，并将其绑定到了一个 users 变量中。我们在模板中使用了 *ngFor 指令来遍历 users 数组，并显示每个用户的名称。
发送 GraphQL 变异
除了查询数据，我们还可以使用 GraphQL 变异来修改数据。在 Angular 应用中，我们可以使用 Apollo 服务中的 mutate() 方法来发送变异。以下是一个简单的变异示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- -----------------
------ --- ---- --------------
------------
--------- -----------
--------- -
------- ----------------------- -------------
-
--
------ ----- ------------ -
------------------- ------- ------- --
--------- -
--------------------
--------- ----
-------- -
------------- ------- ------ ------------------- -
--
----
-----
-
-
-
------------------- -- -
---------------- ---- -------- ---------------------
---
-
-在这个例子中，我们使用 Apollo 服务创建了一个变异，并在点击按钮时执行了这个变异。当变异成功时，我们会在控制台中输出新用户的信息。
结论
在本文中，我们介绍了如何在 Angular 应用中使用 GraphQL。我们首先安装了 Apollo 客户端，然后配置了客户端并创建了一个 GraphQL 查询。最后，我们还学习了如何发送 GraphQL 变异来修改数据。希望这篇文章对你有所帮助，让你能够更加高效地使用 GraphQL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675ae92d4b9d41201abd3a18