GraphQL 是一种用于 API 的查询语言，由 Facebook 开发并开源。它可以让前端应用精确地获取需要的数据，避免了 REST API 中的“过度获取”问题，同时也可以轻松地获取嵌套数据。在 Angular 中使用 GraphQL 的过程中，我们可以利用已有的工具库来轻松地集成 GraphQL，让应用更加灵活高效。
安装 GraphQL 和 Angular Apollo
首先，我们需要在项目中安装以下两个依赖：
npm install graphql --save npm install apollo-angular apollo-angular-link-http apollo-client --save
创建后端 GraphQL 服务器
我们需要一个后端来提供 GraphQL API，可以选择使用现成的工具，比如 Prisma，或者根据自己的需要来创建一个新的 GraphQL 服务器。下面是一个简单的示例，请确保您已经安装好了以下依赖：
npm install graphql-yoga moment
在项目目录中创建一个文件 app.js，并添加以下代码：
-- -------------------- ---- -------
----- - ------------- - - ------------------------
----- ------ - ------------------
----- -------- - -
---- ----- -
---- ------
-
--
----- --------- - -
------ -
---- -- -- --------------------------- ----------
-
--
----- ------ - --- --------------- --------- --------- ---
--------------- -- ------------------- -- ------- -- -------------------------在终端中执行 node app.js 启动服务器，然后在浏览器中打开 http://localhost:4000/graphql 确保服务器已成功启动。
在 Angular 中使用 GraphQL
现在我们已经有了一个 GraphQL API，现在我们需要在 Angular 中使用它。在 Angular 中，我们需要使用 Apollo Angular 来连接 GraphQL 服务器和我们的应用程序。
初始化 Apollo Client
在 app.module.ts 中，我们需要初始化 Apollo Client。首先导入所需的模块：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ApolloModule, Apollo } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';然后添加以下代码来初始化 Apollo Client：
-- -------------------- ---- -------
-----------
-------- -
--------------
-----------------
-------------
--------------
-
--
------ ----- --------- -
------------
------- -------
--------- --------
- -
---------------
----- ----------------- ---- ------------------------------- ---
------ --- ---------------
---
-
-在这里，我们创建了一个链接到后端 GraphQL 服务器的 Apollo 客户端，并将其存储在注入的 Apollo 中。
查询数据
现在我们已经初始化了 Apollo Client，我们可以在组件中发起 GraphQL 查询了。首先，导入所需的模块：
import { Component } from '@angular/core';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';然后，在组件中添加以下代码：
-- -------------------- ---- -------
------------
--------- -----------
--------- -
---- --------------------------------
---- ------------------- --------
---- -------------- --- --------
-
--
------ ----- ------------ -
-------- --------
------ ----
---- -------
------------------- ------- ------- --
---------- -
-----------
--------
------ ----
----- -
---
-
-
--
-----------
-- ----- ------- -- -- -
------------ - --------
-------- - ---------
--
----- -- -
------------ - ------
---------- - ------
-
--
-
-这里我们发起了一个简单的 GraphQL 查询，并在组件中订阅了结果。在组件中，我们将 loading、error 和 now 属性与 UI 绑定，实时显示 API 响应。
结论
在使用 GraphQL 进行数据查询时，只会返回我们需要的数据。与 REST API 不同，GraphQL 允许我们指定哪些数据在响应中返回，这样能够显著降低应用程序的带宽使用量。在 Angular 中集成 GraphQL 的过程中，我们可以使用 Apollo 客户端来快速创建一个连接到后端 GraphQL 服务器的环境。希望这篇文章能够帮助你了解如何在 Angular 中使用 GraphQL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fcff6f4471362601759c31