[译] 写给前端开发者的 GraphQL 指南

• 原文地址：A Front End Developer’s Guide to GraphQL
• 原文做者：PEGGY RAYZIS
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：ellcyyang
• 校对者：Xekin-FE, xueshuai

无论你的应用是复杂仍是简单，你老是要从远程服务器获取数据。在前端，这意味着和某个端点进行 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 客户端并无和视觉层相耦合，你能够用 React、Angular、Vue 甚至原生 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）！ 🚀

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。