在前端使用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代码。