前端开发者 GraphQL 指南

无论您的应用程序是大型还是小型，您都将在某个时刻需要处理从远程服务器获取数据。在前端，这通常涉及访问 REST 端点、转换响应、缓存它以及更新您的 UI。多年来，REST 一直是 API 的现状，但在过去的一年中，一种名为 GraphQL 的新 API 技术因其出色的开发人员体验和声明式数据获取方法而迅速流行起来。

在这篇文章中，我们将逐步介绍几个动手实践的示例，向您展示将 GraphQL 集成到您的应用程序中如何解决处理远程数据的许多痛点。如果您是 GraphQL 新手，请不要惊慌！我还会重点介绍一些资源，帮助您使用 Apollo 堆栈学习 GraphQL，这样您就可以在 2018 年初领先一步。

GraphQL 101

在我们深入探讨 GraphQL 如何让您的前端开发人员生活更轻松之前，我们应该首先弄清楚它是什么。当我们谈论 GraphQL 时，我们指的是语言本身或其丰富的工具生态系统。从本质上讲，GraphQL 是由 Facebook 开发的一种类型化查询语言，它允许您以声明的方式描述您的数据需求。结果的形状与您的查询形状相匹配：在下面的示例中，我们可以预期接收一个包含 currency 属性和 rates 属性的对象，该属性包含一个包含 currency 和 rate 键的数组。

{
  rates(currency: "USD") {
    currency
    rates {
      currency
      rate
    }
  }
}

当我们从更广泛的角度谈论 GraphQL 时，我们通常指的是帮助您在应用程序中实现 GraphQL 的工具生态系统。在后端，您将使用 Apollo Server 创建 GraphQL 服务器，它是一个单个端点，用于解析 GraphQL 请求并返回数据。服务器如何知道要返回哪些数据？您将使用 GraphQL Tools 来构建一个模式（就像您数据的蓝图）和一个解析器映射（只是一系列从 REST 端点、数据库或您选择的任何其他地方检索数据的函数）。

这一切听起来比实际操作起来要复杂得多——借助 Apollo Launchpad（一个 GraphQL 服务器游乐场），您可以在浏览器中用不到 60 行代码创建一个可用的 GraphQL 服务器！😮 我们将参考这个 我创建的 Launchpad，它在本文中将包装 Coinbase API。

您将使用 Apollo Client 将您的 GraphQL 服务器连接到您的应用程序，它是一个快速灵活的客户端，可以为您获取、缓存和更新数据。由于 Apollo Client 未与您的视图层耦合，因此您可以将其与 React、Angular、Vue 或纯 JavaScript 一起使用。Apollo 不仅跨框架，而且还跨平台，React Native 和 Ionic 现已原生支持。

让我们试试！🚀

既然您已经熟悉了 GraphQL 是什么，那么让我们动手实践一些实际示例，说明使用 Apollo 开发前端是怎样的。最后，我认为您会相信基于 GraphQL 的架构与 Apollo 可以帮助您比以前更快地发布功能。

1. 在不添加新端点的情况下添加新的数据需求

我们都经历过这种情况：您花费数小时构建一个完美的 UI 组件，突然，产品需求发生了变化。您很快意识到，满足这些新需求所需的数据要么需要复杂的 API 请求瀑布，要么更糟，需要一个新的 REST 端点。现在您的工作被阻挡了，您要求后端团队为您构建一个新的端点，仅仅是为了满足一个组件的数据需求。

GraphQL 使这种常见的挫折不再存在，因为您在客户端消耗的数据不再与端点的资源耦合。相反，您始终访问 GraphQL 服务器的同一个端点。您的服务器通过模式指定它拥有的所有资源，并让您的查询决定结果的形状。让我们使用 我们之前的 Launchpad 来说明这些概念。

在我们的模式中，看看第 22-26 行，我们在那里定义了 ExchangeRate 类型。这些字段列出了我们在应用程序中可以查询的所有可用资源。

type ExchangeRate {
  currency: String
  rate: String
  name: String
}

使用 REST 时，您将受到资源提供数据的限制。如果您的 /exchange-rates 端点不包含 name，那么您将需要访问另一个端点（例如 /currency）来获取数据，或者在不存在的情况下创建它。

使用 GraphQL，我们知道 name 已经可以通过检查我们的模式来获取，因此我们可以在应用程序中查询它。通过在右侧面板上添加 name 字段，尝试在 Launchpad 中运行此示例！

{
  rates(currency: "USD") {
    currency
    rates {
      currency
      rate
      name
    }
  }
}

现在，删除 name 字段并运行相同的查询。看到我们的结果形状是如何改变的吗？

您的 GraphQL 服务器始终只返回您请求的精确数据。不多不少。这与 REST 大不相同，在 REST 中，您通常必须过滤和转换从服务器获取的数据，使其成为 UI 组件所需的形状。这不仅为您节省了时间，而且还减少了网络负载，并通过加载和解析响应节省了 CPU 资源。

2. 减少状态管理样板代码

获取数据几乎总是涉及更新应用程序的状态。通常，您将编写代码来跟踪至少三个操作：数据加载时的操作、数据成功到达时的操作以及数据出错时的操作。数据到达后，您必须将其转换为 UI 组件预期的形状、对其进行规范化、缓存它并更新 UI。此过程可能很重复，需要无数行的样板代码来执行一个请求。

让我们看看 Apollo Client 如何通过查看 CodeSandbox 中的 React 应用程序示例 来完全消除这个繁琐的过程。导航到 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 Client 的 React 集成）将我们的汇率查询绑定到我们的 ExchangeRateList 组件。一旦 Apollo Client 执行该查询，它就会自动跟踪加载和错误状态，并将其添加到 data prop 中。当 Apollo Client 接收结果时，它将使用查询的结果更新 data prop，这将使用它需要渲染的费率更新您的 UI。

在幕后，Apollo Client 为您规范化和缓存数据。尝试单击右侧面板中的一些货币，观察数据如何刷新。现在，再次选择一种货币。注意数据是如何立即出现的吗？那就是 Apollo 缓存的作用！您只需使用 Apollo Client 设置，而无需任何额外的配置，就可以免费获得所有这些功能。😍 要查看我们初始化 Apollo Client 的代码，请查看 index.js。

3. 使用 Apollo DevTools 和 GraphiQL 快速轻松地调试

Apollo Client 似乎为您做了很多事情！我们如何窥视内部以了解发生了什么？借助存储检查器和对您的查询和变异的完全可见性等功能，Apollo DevTools 不仅回答了这个问题，而且还使调试变得轻松愉快！🎉 它可以作为 Chrome 和 Firefox 的扩展使用，React Native 扩展即将推出。

如果您想一起学习，请 为您的首选浏览器安装 Apollo DevTools，然后导航到 我们之前的 CodeSandbox。您需要通过单击顶部的“下载”按钮在本地运行示例，解压缩文件，运行 npm install，最后运行 npm start。打开浏览器的开发工具面板后，您应该会看到一个名为“Apollo”的选项卡。

首先，让我们查看一下我们的存储检查器。此选项卡反映了当前在您的 Apollo Client 缓存中的内容，使您能够轻松地确认您的数据是否已正确存储在客户端上。

Apollo DevTools 还使您能够在 GraphiQL 中测试您的查询和变异，GraphiQL 是一个交互式查询编辑器和文档浏览器。事实上，您已经在第一个示例中使用过 GraphiQL，我们在该示例中尝试将字段添加到我们的查询中。为了回顾一下，GraphiQL 在您在编辑器中键入查询时提供自动完成功能，并根据 GraphQL 类型系统自动生成文档。对于探索模式非常有用，而且开发人员没有任何维护负担。

尝试在我们的 Launchpad右侧面板的 GraphiQL 中执行查询。要显示文档浏览器，您可以将鼠标悬停在查询编辑器中的字段上，然后单击工具提示。如果您的查询在 GraphiQL 中成功运行，您可以 100% 确定相同的查询将在您的应用程序中成功运行。

提升您的 GraphQL 技能

如果您已经完成了这些步骤，太棒了！ 👏 我希望您享受这些练习，并体验到在前端使用 GraphQL 的感觉。

想要了解更多？🌮 将学习更多关于 GraphQL 的知识作为您的 2018 年新年愿望，因为我预计它在未来一年会更加流行。以下是一个示例应用程序，可以帮助您入门，其中包含我们今天学习的概念

• React: https://codesandbox.io/s/jvlrl98xw3
• Angular (Ionic): https://github.com/aaronksaunders/ionicLaunchpadApp
• Vue: https://codesandbox.io/s/3vm8vq6kwq

开始您的 GraphQL 之旅吧（并确保在旅途中在 Twitter 上标记我们 @apollographql）！ 🚀