在Airbnb上迁移到GraphQL

Airbnb已经成功地将其大部分API迁移到GraphQL，从而提高了页面加载时间和更直观的用户体验。在GraphQ L峰会上，BrieBunge介绍了Airbnb许多团队使用的多阶段迁移过程。

随着每个阶段的完成，Airbnb最终得到了一个100%类型安全的Apollo和GraphQL应用程序，没有过度抓取，他们在迁移过程的每个阶段都保持了站点的运行和运行。采用Apollo和GraphQL创建了一个基础，允许Airbnb尝试新的性能改进，而传统的基于REST的体系结构是不可能的。

在开始移徙进程之前，必须解决两个先决条件。首先，必须在后端设置GraphQL。亚当·内里写过Airbnb是如何开始使用GraphQL的。

第二个先决条件是在前端采用TypeScript。在Airbnb，TypeScript和类型安全导致了更快的发展，团队对他们正在建设的东西更有信心。类型脚本类型可以直接从模式生成(使用阿波罗客户端：codegen-target=typescript)，这些类型在后端和前端之间创建一个单一的真相源。

TypeScript现在是Airbnb前端开发的官方语言，其300万行代码库的一半已经迁移到TypeScript。Bunge此前曾在JS Conf就Airbnb采用TypeScript一事发表演讲。

Bunge说，转换为GraphQL有三个主要选项。首先，也是最具诱惑力的，是从零开始的彻底改写..虽然这在某些情况下是作为其他主要项目的一部分发生的，但通常不是一个可行的选择。第二个选择，停止和重构，很好地工作在小型或单独的团队，但很难与许多开发人员一起工作。

迁移选项Airbnb推荐的是增量采用，这一直是最安全和最可行的方法，特别是拥有庞大的团队和庞大的、预先存在的代码基础。描述的过程Bunge由五个阶段组成，每个阶段的目标是拥有一个可移动的、功能齐全的、无回归的应用程序版本。

第一阶段改变了数据来自哪里，而不是如何使用它。有了GraphQ L端点和TypeScript，REST请求可以与GraphQL请求交换。第一阶段的目标是验证前端到后端集成是否工作，并且类型脚本类型生成是否正常工作。没有对React组件或API响应的形状进行更改。这需要与REST端点匹配的GraphQL查询和突变。

在这个早期阶段，Airbnb所依赖的两个图形QL特性是别名和适配器。别名允许在从图形QL返回的骆驼案例属性和旧REST端点的蛇案例属性之间进行映射。适配器用于转换GraphQL响应，以便它可以递归地与REST响应不同，并确保GraphQL返回的数据与以前相同。这些适配器稍后将被移除，但它们对于实现第一阶段的均等目标至关重要。

第二阶段的重点是在整个代码中传播类型，这增加了后期阶段的置信度。此时，不应影响运行时行为。

第三阶段改进阿波罗的使用..早期阶段直接使用ApolloClient，它启动Redux Actions，组件使用Redux商店。使用React Hooks(@apollo/react-Hooks)重构应用程序允许使用阿波罗缓存而不是Redux商店。

图QL的一个主要好处是减少过取。第一阶段，使用mega查询，保留了旧REST端点的所有过取行为，但第四阶段能够通过引入更多粒度查询片段来解决这一问题。

起初，只有应用程序的根知道GraphQL，并且必须获取树中任何组件可能需要的所有数据。改进过程从组件树的最低叶节点开始，方法是仅为该子组件所需的数据创建GraphQL查询。如果不存在所需字段，TypeScript将抛出编译器警告。然后修改父组件以根据其子组件的片段获取数据。一个“冲洗和重复”的过程穿过所有的叶节点，然后向上树到应用程序根，在那里，旧的巨型查询已经被所有的组合片段所取代。因为所有的片段都只是请求他们需要的数据，所以过取被消除了。

第五个也是最后一个阶段涉及阶段管理。一旦所有组件都迁移到阿波罗，Airbnb就可以利用阿波罗获取API数据，并对客户端数据的本地状态或上下文进行反应。这为处理客户端数据提供了一个一致的心理模型，并改进了将React、Apollo和Redux元素结合在一起的碎片化模型。它还消除了Redux所需的许多样板代码，并且比手工滚动的解决方案更有效地处理缓存。

有了GraphQL，Airbnb现在可以尝试新的机会。描述的第一种情况是服务人员查询预取，以尽早启动GraphQL查询，以便用户更快地看到数据呈现的页面。

在没有服务工作者的情况下，页面被呈现在服务器端，当用户等待渲染完成并交付完整页面时，存在很长的间隙。服务人员允许一个应用程序外壳立即显示，在加载阶段，页面开始填写，因为数据被返回。页面加载也更快，因为大部分JavaScript是缓存的。然后，服务工作者可以通过从组件级查询切换到路由级查询来提供进一步的改进。基于设备限制，这可能导致页面完全交互之前的总时间额外减少23-50%。

目前正在进行的另一个项目是以数据为中心的统一模式。当前的模式与Airbnb的面向服务的架构是一致的。因为服务可以不同的方式组合相同的底层数据，所以数据往往是重复的..通过切换到以数据为中心的模式，并在体系结构中添加数据水化层，可以避免重复的数据请求，可以删除重复的代码，响应更有效，并且可以改进缓存。这项工作目前正在测试中，但看起来很有希望，并将在未来一年宣布更多。