本文永久链接: https://github.com/xitu/gold-miner/blob/master/TODO/front-end-developers-guide-graphql.md
不管你的应用是复杂还是简单, 你总是要从远程服务器获取数据在前端, 这意味着和某个端点进行 REST 连接转化并缓存服务器应答以及重新渲染 UI 多年以来, REST 是 API 的标配, 但是在过去的一年内, 一种名为 GraphQL 的新 API 技术凭借它优秀的开发体验和叙述性数据获取方式开始流行起来
在这篇文章中我们将会通过一系列实例来说明 GraphQL 会如何帮助你解决获取远程数据的痛点如果你是个 GraphQL 新手, 也不用害怕! 我会列举一些学习资源来帮助你使用 Apollo 栈学习 GraphQL, 然后你就能领先别人一步掌握它
GraphQL 101
在我们弄明白为什么 GraphQL 可以让前端工程师更轻松之前, 我们需要先搞清楚它是什么当我们说起 GraphQL, 我们要么是指这种语言本身, 要么是指与它相关的一整套丰富的工具生态系统就其核心而言, GraphQL 是 Facebook 开发的一种类型化的查询语言, 让你能够以一种叙述性的方式表达你对数据的需求你的查询结果的格式应该和你的查询语句相匹配在下面这个例子里, 我们期待得到一个有 currency 和 rates 属性的对象, 其中 rates 又是包含了 currency 和 rate 关键字的对象的数组
- {rates(currency: "USD") {
- currency
- rates {
- currency
- rate
- }
- }
- }
当我们讨论广义上的 GraphQL 时, 我们主要指的是由帮助部署 GraphQL 到应用中的一些工具所组成的生态系统在后端, 你将使用 Apollo 服务器 来创建一个 GraphQL 服务器 一个解析 GraphQL 请求并返回数据的端点服务器怎么知道应该返回哪些数据呢? 你需要使用 GraphQL 工具 来创建一个字典 (你的数据蓝图) 和一个分解映射(用于从一个 REST 端点数据库或别的什么中检索数据的一系列函数)
但它实际上比听起来要简单 通过 Apollo 启动台(一个 GraphQL 服务器控制台), 你可以用不超过 60 行代码在浏览器里创建一个可运行的 GraphQL 服务器! 我们参考了这个 我创建的启动台 , 其中包含了文章中所提到的 Coinbase API
你将会使用 Apollo 客户端 连接你自己的 GraphQL 服务器和应用, 它是一个为你获取缓存和更新数据的灵活快速的客户端鉴于 Apollo 客户端并没有和视觉层相耦合, 你可以用 ReactAngularvue 甚至原生 JavaScript 编写除了跨框架之外, Apollo 也可以跨平台, 它支持 React Native 和 Ionic
试一试!
现在你已经掌握到底什么是 GraphQL 了, 动手尝试用几个实例把 Apollo 应用到你的前端工作中去吧我相信你最终会认可这一点 一个使用了 Apollo 的基于 GraphQL 的架构将会帮助你更快地传送数据
1. 添加新的数据需求但不添加新端点
我们都遇到过这种情况: 花费几个小时创建了一个完美的 UI 组件, 然后产品需求突然改变了你突然意识到, 为了获得实现新需求所需的数据, 你将不得不实现一个接收 API 请求的复杂瀑布模型 或者更糟 一个新的 REST 端点然后你的工作阻塞了, 你不得不要求后端为这个组件再添加一个新端点
这种常见问题在 GraphQL 中不再出现, 因为你在客户端需求的数据不再和某个端点的资源相耦合相反, 你发向 GraphQL 服务器的请求总是连上同一个端点你的服务器通过你发送的字典指定所有的可用资源, 让你的查询定义你所得到的结果的格式让我们在 我的启动台 中用之前的例子说明这些概念:
在我们的字典里的第 22~26 行, 我们定义了 ExchangeRate 类型这些字段列举出了所有在我们的应用中可查询的资源
- type ExchangeRate {
- currency: String
- rate: String
- name: String
- }
在 REST 中, 我们受限于数据源所能提供的数据如果你的 /exchange-rates 端点不包含 name, 你必须连接一个新的端点比如 /currency 来得到数据或者在数据不存在的情况下创建它
有了 GraphQL, 我们可以检查字典, 从而了解到 name 字段是可查询的尝试在启动台右侧面板中添加 name 字段, 然后运行
- {
- rates(currency: "USD") {
- currency
- rates {
- currency
- rate
- name
- }
- }
- }
现在, 把 name 字段删掉再重新执行查询看到了你的查询结果的格式变化了吗?
你的 GraphQL 服务器总是忠实地返回你所要求的数据, 不会多给这和 REST 有很大不同 在 REST 里你必须把数据过滤和转化成你的 UI 组件所需要的样子这不仅仅节约了时间, 而且还减少了加载和解析数据所需的网络负荷和 CPU 存储空间
2. 压缩你的状态管理模版
一般来说, 获取数据包含了更新你的应用的状态你通常需要编写代码来追踪至少三个行为: 数据何时被加载数据是否成功抵达数据是否发生错误一旦数据抵达, 你必须把它转化为你的 UI 组件所期望的样子, 对它进行标准化, 缓存它, 然后更新页面 这个过程是重复性的, 需要无数行模版代码来处理一个请求
让我们来看看在这个例子中 一个 React 应用例子沙盒 Apollo 客户端是如何消灭这个无趣的过程的 查看 list.js 并把滚动条拖到底部
- export default graphql(ExchangeRateQuery, {
- props: ({ data }) => {
- if (data.loading) {
- return { loading: data.loading };
- }
- if (data.error) {
- return { error: data.error };
- }
- return {
- loading: false,
- rates: data.rates.rates
- };
- }
- })(ExchangeRateList);
在这个例子里, React Apollo,Apollo 客户端的 React 集成, 把我们的汇率查询关联到 ExchangeRateList 组件一旦 Apollo 客户端处理了那个查询, 它自动追踪加载和错误状态并把它放入 data prop 中去当 Apollo 客户端收到结果, 它会根据查询结果更新 data prop, 然后按照在渲染中需要用到的汇率更新 UI
Apollo 客户端在底层为你完成了数据格式化和缓存工作 尝试在右侧面板单击不同种类的货币看数据刷新现在, 再一次选择某个货币, 看到数据如何立刻出现了吗? 这是 Apollo 缓存在工作不需要额外设置你就能免费从 Apollo 客户端获得这些 打开 index.js 来看我们初始化 Apollo 客户端的代码
3. 使用 Apollo DevTools 和 GraphiQL 快速进行调试
看起来 Apollo 客户端已经为你做了很多工作! 我们该如何偷看一下它的内部来了解它是如何运行的呢? 有了存储检查和查询与转变过程的完全可见化, Apollo DevTools 不但能回答这些疑问, 还能让调试过程不再枯燥甚至变得有趣! 这在一个为 Chrome 和 Firefox 提供的插件中可用, 很快它也将对 React Native 提供服务
如果你想要试用一下, 按照之前的例子, 在你喜欢的浏览器上 安装 Apollo DevTools 然后导航到 our CodeSandbox 你需要在顶部导航栏点击下载, 解压文件, 运行 npm install 然后 npm start 来在本地运行这个例子一旦你打开了浏览器的开发工具面板, 你应该看到一个叫 Apollo 的标签页
首先, 我们来检查下存储检查器这个标签页反映了 Apollo Client 缓存中的状态, 让你更容易确定你的数据是不是正确地被存储在客户端了
Apollo DevTools 让你也可以在 GraphiQL 中测试你的查询和变更, 它是一个交互式的查询编辑器和文档浏览器事实上, 我们在第一个例子中尝试添加字段时已经使用了 GraphiQL 为了方便回顾, 当你在将查询输入编辑器时, GraphiQL 将会自动补全, 并且自动生成基于 GraphQL 类型系统的文档这对于拓展字典来说极为有用, 不会给开发者带来任何维护成本
尝试在 我的启动台 中右侧面板的 GraphiQL 中执行查询! 鼠标停在查询编辑器的字段上, 并单击提示框来打开文档浏览器如果你的查询能在 GraphiQL 里成功运行, 那你就可以 100% 肯定这条查询也可以在你的应用中成功运行
升级你的 GraphQL 技能
好样的, 你已经看到这儿了! 希望你喜欢这些例子, 并且开始了解应该如何在前端使用 GraphQL 了
想要了解更多? 把 继续学习 GraphQL 列入你的 2018 新年计划吧! 因为我希望它在新的一年里能够更加流行下面是教你如何活用新学到的概念的应用实例:
- React: codesandbox.io/s/jvlrl98xw
- Angular (Ionic): github.com/aaronksaund
- Vue: codesandbox.io/s/3vm8vq6kw
继续使用 GraphQL 吧(记得关注我们的 Twitter @apollographql)!
掘金翻译计划 是一个翻译优质互联网技术文章的社区, 文章来源为 掘金 上的英文分享文章内容覆盖 AndroidiOS 前端后端区块链产品设计人工智能等领域, 想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏
来源: https://juejin.im/post/5ac09072518825558c479215