GraphQL 是一种用于 API 的查询语言，它可以让前端开发人员更加灵活地获取所需的数据。在 Angular 12 中使用 GraphQL 可以帮助我们更加高效地开发应用程序。本文将介绍如何在 Angular 12 中使用 GraphQL。
安装依赖
首先，我们需要安装一些依赖。在 Angular 12 中使用 GraphQL，我们需要安装以下依赖：
npm install apollo-angular apollo-angular-link-http graphql graphql-tag
配置 Apollo
接下来，我们需要配置 Apollo。在 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- -----------------------
------ - ------------- ------ - ---- -----------------
------ - --------------- -------- - ---- ---------------------------
------ - ------------- - ---- ------------------------
-----------
-------- -
--------------
-----------------
-------------
--------------
--
---------- ---
---------- --------------
--
------ ----- --------- -
------------
------- -------
--------- --------
- -
---------------
----- ----------------- ---- ------------------------------- ---
------ --- ---------------
---
-
-在这里，我们使用 ApolloModule 和 HttpLinkModule 来配置 Apollo。然后我们在 AppModule 构造函数中创建 Apollo 实例并设置链接和缓存。
编写查询
现在，我们可以编写查询了。在我们的组件中，我们可以使用 Apollo 服务来执行查询。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- -----------------
------ --- ---- --------------
------------
--------- -----------
--------- -
---- --------------------------------
---- -------------------- -- ------------- --------
---- ------------------ -- --------- --------
-
--
------ ----- ------------ -
-------- --------
------ ----
----- ----
------------------- ------- ------- --
---------- -
-----------
--------
------ ----
-
-------- ---- -
----
-
-
-
--
------------- ----- -------- ------ -- -- -
------------ - --------
---------- - -------
--------- - ---- -- ----------
---
-
-在这里，我们使用了 Apollo 服务来执行查询。我们使用 gql 函数来定义查询。然后我们在 AppComponent 构造函数中执行查询，并将结果绑定到组件的属性中。
编写变异
除了查询，我们还可以编写变异。变异可以用来更改数据。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- -----------------
------ --- ---- --------------
------------
--------- -----------
--------- -
------- ----------------------------- -------------
-
--
------ ----- ------------ -
------------------- ------- ------- --
------------ -
-----------
---------
--------- ----
-------- -
-------------- ---- ----- ---- ------ -
--
----
-
-
-
--
----------------- -- -
--------------------
---
-
-在这里，我们使用 Apollo 服务来执行变异。我们使用 gql 函数来定义变异。然后我们在 AppComponent 中定义了 updateUser 方法，该方法将执行变异并将结果打印到控制台中。
结论
在 Angular 12 中使用 GraphQL 可以帮助我们更加高效地开发应用程序。通过安装依赖、配置 Apollo、编写查询和变异，我们可以轻松地使用 GraphQL。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676a7b1f78388e33bb171e5a