把REST包装成GraphQL

摘要

从前端开发者的角度来看，GraphQL 是一个支持积极更新数据（Optimistic Update）、在 React 组件旁边声明式地取数据、数据所见即所得的数据层范式。由 Facebook 所推广的它，比起 RESTful API 有很多先进之处。本文以一个生产环境中的例子相伴，介绍了如何在不影响后端开发人员的情况下将现有的 RESTful API 包装成便于前端使用的 GraphQL API。

背景

在一个从外包人员处接手的前端项目中，我见到了许多有趣的遗迹，例如页面间复制黏贴的无用 import、许多后缀名加上 .bak 但与另一个页面无甚区别的古老页面、富有童趣的组件命名等。其中对 API 的使用尤为令人动容，大概是这样子：

import * as Mapi from '../../lib/Mapi'; // ... 略去无关代码 componentWillMount() { Mapi.districtPie(this.props.id) .then(json => { if (json.data.code === 0 && json.data.data !== undefined) { this.setState({ districtPiedata: json.data.data, }); } }); Mapi.pie() .then(json => { if (json.data.code === 0) { this.setState({ piedata: json.data.data, }); } }); Mapi.whoami() .then(json => { this.setState({ user: json.data.data }); }); } 

看起来有点臃肿，因为里面有着大量的重复代码。
看起来有点懵逼，因为我们无法看出 piedata 里面有啥。如果你它有比较深的层级，就很容易出 Cannot read property 'machine' of undefined 或者 undefined is not an object，特别是当你还上了 ES6...