[译] 怎样使用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代码。