[译] 怎样使用GraphQL - 进阶 - 1.客户端

英文原版地址：https://www.howtographql.com/...

在前端使用GraphQL API，对于抽象和实现基础功能，是一个好机会。让咱们考虑你在应用中可能想要的一些“基础”功能：

• 直接发送查询和mutation而不用构建HTTP请求
• 视图层集成
• 缓存
• 基于schema去校验和优化查询

固然，没有什么能够阻止你仅使用HTTP来获取你的数据，而后本身逐个处理，直到正确的信息最终显示在UI上。 可是GraphQL提供了避免大量手动劳动的能力，让你专一于应用的核心部分！ 在下文中，咱们将更详细地讨论这些能力。

目前有两个主要的GraphQL客户端库。 第一个是Apollo客户端，这是一个社区支持的项目，旨在为全部主要开发平台构建强大而灵活的GraphQL客户端。 第二个被称为Relay，它是Facebook官方的GraphQL客户端，它大大优化了性能，但只能在web上可用。

直接发送查询和mutation

GraphQL的主要优势是它容许您以声明的方式获取和更新数据。换句话说，咱们在API抽象层面更进一步，没必要再本身处理低级网络任务。

之前你使用纯HTTP（如JavaScript中的fetch或iOS中的NSURLSession）从API加载数据。使用GraphQL后，全部操做都将写入一个查询，声明了数据需求后，让系统负责发送请求并处理响应。这正是GraphQL客户端要作的。

视图层集成和UI更新

在服务端的响应，被GraphQL客户端接收到以后，数据须要最终展示在UI中。根据开发的平台和选用的框架不一样，UI更新也将会有不一样的方式。

以React为例，GraphQL客户端使用高阶组件的理念来获取所需的数据，并使其在组件的porps中可用。通常来讲，GraphQL的声明式特性与函数式反应型编程（FRP）结合的很好。二者能够造成强大的组合，其中视图只是声明其数据依赖，UI则与选择的FRP层链接。

缓存查询结果：概念和策略

在大多数应用中，你须要缓存以前从服务器获取的数据。这对于提供流畅的用户体验和维护好用户数据相当重要。

一般，当缓存数据时，直觉是将远程获取的信息放入本地存储中，以便稍后检索。使用GraphQL，直觉上的办法就是将GraphQL查询的结果简单地放入存储，而且只要再次执行彻底相同的查询，就返回先前存储的数据。事实证实，这种方式对于大多数应用来讲是很是低效的。

更有效的方式是提早规范化数据。这意味着（多是）嵌套的查询结果会变得平坦，而且存储的是，可使用全局惟一ID来查询的单个记录内容。若是想了解更多关于这一点的信息，Apollo博客对这个内容作了很好的介绍。

构建时的验证和优化

因为视图（schema）包含有关客户端可使用GraphQL API的全部信息，所以，客户端在构建时验证查询就变得很方便。

当构建环境能够访问schema时，它能够基本解析位于项目中的全部GraphQL代码，并将其与schema中的信息进行比较。这样就能够捕获打字错误和其余错误，避免一些严重后果。

结合视图层和数据层

GraphQL的一个强大的理念是，它容许你并行地处理UI代码和数据需求。界面和数据的紧密结合，大大提升了开发人员的体验。不用再去考虑，如何在UI中恰当的填充数据。

结合带来的优点大小，取决于您正在开发的平台。例如在Javascript应用中，能够将数据依赖和UI代码放在同一个文件中。在Xcode中，Assistant Editor可用于同时处理视图控制器和graphql代码。