Airbnb成功将大部分API迁移到GraphQL
InfoQ编辑Thomas Betts
讲述：丁婵大小：8.08M时长：05:53
Airbnb 已经成功将其大部分 API 迁移到了 GraphQL ，从而缩短了页面加载时间，并提供了更直观的用户体验。此前，在 GraphQL Summit 上的演讲中，Airbnb 的前端软件工程师布里·邦吉（Brie Bunge）描述了 Airbnb 多个团队都使用过的多阶段迁移过程。
在每个阶段都完成之后，Airbnb 推出了一款基于 Apollo 和 GraphQL 的应用程序，该应用程序是 100% 类型安全的，没有过度抓取的问题，而且在迁移过程的各阶段，都能保持网站的正常运行。
因为采用了 Apollo 和 GraphQL 来奠定基础，使 Airbnb 可以尝试新的性能改进，而传统的基于 REST 的架构则无法实现。
在迁移过程开始之前，必须满足两个先决条件：第一，在后端设置 GraphQL；第二，在前端采用 TypeScript。在 Airbnb 、TypeScript 和类型安全促进了更快的开发，并且团队对他们自己所构建的东西更有信心。
布吉表示，转换为 GraphQL 有三个主要的可选项。第一，是完全从零开始重写，这在很多情况下不太可行。第二，是停机并重构，这在众多开发者的协作环境中会运行困难。第三是渐进式迁移，这也是 Airbnb 所推荐的一个选项，因为这是最安全可行的方法，特别是在拥有大型团队和庞大代码库的情况下。
布吉所描述的迁移过程包括五个阶段，每个阶段的目标是发布一个可交付的、功能齐全的、无回归的应用程序版本。
第一阶段是改变数据的来源，而不是数据的使用方式。使用 GraphQL 后端和 TypeScript 后， REST 请求就可以与 GraphQL 请求交换。第一个阶段的目标是验证前端到后端的集成是否能正常工作以及 TypeScript 类型生成是否能正常工作。无需变更 React 组件或 API 响应的模型。这需要与 REST 端点匹配的 GraphQL 查询和变异。
Airbnb 早期依赖的两个 GraphQL 特性是别名和适配器。别名实现了 GraphQL 返回的驼峰式属性与旧 REST 端点的蛇形属性之间的映射。适配器用于转换 GraphQL 响应，这样就可以递归地将它与 REST 响应区分开来，并确保 GraphQL 返回与之前相同的数据。这些适配器在后面会被删除，但是它们对于实现第一阶段的对等目标是至关重要的。
第二阶段的重点是整个代码中的传播类型，这将增加后面阶段的可信度。此时，不应影响任何运行时行为。
第三阶段是改进 Apollo 的使用。早期阶段直接使用了 Apollo Client，通过 Apollo Client 触发 Redux 操作，使组件能够使用 Redux 存储。使用 React Hooks重构应用程序可以使用 Apollo 缓存代替 Redux 存储。
GraphQL 的一个主要优点是减少过度抓取。使用大型查询的第一个阶段保留了旧 REST 端点的所有过度抓取行为，但是第四个阶段可以通过引入更细粒度的查询片段来解决这个问题。
首先，只有应用程序的根组件才能感知到 GraphQL ，并且它必须获取树中任何组件可能需要的所有数据。改进过程从组件树的最低叶节点开始，方法是仅为该子组件所需的数据创建一个 GraphQL 查询。这时 TypeScript 很有用，因为如果所需的字段不存在，它将抛出编译器警告。然后修改父组件以根据其子组件的片段来获取数据。一个“清洗并重复”的过程会遍历所有的叶子节点，然后沿树向上到达应用程序的根组件，在那里旧的大型查询已经被所有组合的片段所替换。因为所有片段都只请求它们所需要的数据，所以消除了过度抓取。
第五阶段，也是最后一个阶段，是阶段管理。一旦将所有组件都迁移到 Apollo，Airbnb 就可以利用 Apollo 来获取 API 数据、React 本地状态或客户端上下文数据。这为处理客户端数据提供了一个一致的心智模型，并对组合了 React 、Apollo 和 Redux 元素的碎片模型进行了改进。它还消除了 Redux 所需的大量样板代码，并且它处理缓存的方式比手动滚动的解决方案更有效。
有了 GraphQL，Airbnb 现在可以尝试新的技术，比如 Service Worker 查询预取，它是为了尽早启动 GraphQL 查询，以便用户能更快地看到使用数据呈现的页面。再比如以数据为中心的统一模式，并在 Airbnb 面向服务的架构中添加数据水化层，可以避免重复的数据请求、删除重复的代码、提高响应效率、并改进缓存。
以上就是 Airbnb 将大部分 API 迁移到 GraphQL 的过程，希望对你有所帮助。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》，如需阅读全部文章，
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(3)
- 最新
- 精选
编码者厉害了👍1- Norman客户端怎么使用graphql呢
刘培培👍
收起评论