前言
GraphQL 是一种用于 API 的查询语言，是由 Facebook 开发的。它提供了一种更高效、更强大、更灵活的 API 查询方式。与传统的 RESTful API 相比，GraphQL 具有更好的可扩展性、更好的类型检查和更好的请求控制等优点。在 Angular 应用中使用 GraphQL 进行 API 调用，可以让我们更加方便地进行数据交互。
安装依赖
首先，我们需要安装一些依赖。在 Angular 应用中，我们可以使用 apollo-angular 和 graphql 库来进行 GraphQL API 调用。我们可以使用以下命令来安装这些库：
npm install apollo-angular graphql --save
配置 GraphQL 客户端
在 Angular 应用中，我们可以使用 Apollo 客户端来与 GraphQL API 进行交互。我们需要在应用的 app.module.ts 文件中进行配置。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- -----------------------
------ - ------------- ------ - ---- -----------------
------ - --------------- -------- - ---- ---------------------------
------ - ------------- - ---- ------------------------
-----------
-------- -
--------------
-----------------
-------------
--------------
--
---------- ---
---------- --------------
--
------ ----- --------- -
------------
------- -------
--------- --------
- -
---------------
----- ----------------- ---- ------------------------------- ---
------ --- ---------------
---
-
-在上面的代码中，我们使用 Apollo 和 HttpLink 来创建一个 GraphQL 客户端。我们需要指定 GraphQL API 的地址，这里是 http://localhost:3000/graphql。同时，我们使用 InMemoryCache 来缓存 GraphQL 请求的结果。
定义 GraphQL 查询
在 Angular 应用中，我们可以使用 Apollo 客户端来定义 GraphQL 查询。我们可以使用 gql 函数来创建 GraphQL 查询：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------ - ---- -----------------
------ --- ---- --------------
----- --------- - ----
----- -------- -
----- -
--
----
-----
-
-
--
------------
--------- ------------
--------- -
----
--- ----------- ---- -- ----- - -------
-- --------- -- --- ---------- ---
-----
-----
--
--
------ ----- -------------- ---------- ------ -
------ ----
------------------- ------- ------- --
---------- -
---------- - ------------------------
------ ---------
---------------------
------------ ---- -- ------------------
--
-
-在上面的代码中，我们定义了一个名为 GET_USERS 的 GraphQL 查询。这个查询会返回所有用户的 id、name 和 email。我们在组件的 ngOnInit 方法中使用 Apollo 客户端来执行这个查询，并将查询结果通过 async 管道绑定到组件的模板中。
发送 GraphQL 变更
在 Angular 应用中，我们可以使用 Apollo 客户端来发送 GraphQL 变更。我们可以使用 mutate 方法来发送 GraphQL 变更：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- -----------------
------ --- ---- --------------
----- ----------- - ----
-------- ------------------ ----------- -
----------------- ------- -
--
----
-----
-
-
--
------------
--------- ------------------
--------- -
----- ------------------------
------ ------------------------
------ ----------- ----------- ------------------ ---------
------ --------------------------
------ ------------ ------------ ------------------- ---------
------- -------------------- -------------
-------
--
--
------ ----- ------------------- -
----- -------
------ -------
------------------- ------- ------- --
---------- -
--------------------
--------- ------------
---------- -
------ -
----- ----------
------ ----------
-
-
--------------------- ---- -- -
------------------------------------
---
-
-在上面的代码中，我们定义了一个名为 CREATE_USER 的 GraphQL 变更。这个变更会创建一个新的用户，并返回这个用户的 id、name 和 email。我们在组件的 onSubmit 方法中使用 Apollo 客户端来发送这个变更，并将变更结果打印到控制台中。
结论
在 Angular 应用中使用 GraphQL 进行 API 调用，可以让我们更加方便地进行数据交互。通过使用 Apollo 客户端，我们可以轻松地定义 GraphQL 查询和变更，并将它们与组件进行集成。在实际开发中，我们可以根据具体的业务需求来使用 GraphQL 进行数据交互，从而提高开发效率和用户体验。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6763c9ac856ee0c1d4228b6e