GraphQL 和 Apollo 为何能帮助你更快地完成开发需求？

时间 2019-11-07

原文原文链接

在大前端应用的开发过程当中，如何管理好数据是一件颇有挑战的事情。后端工程师须要聚合来自多个数据源的数据，再分发到大前端的各个端中，而大前端工程师须要在实现用户体验好的视图 (optimistic UI¹) 的基础上，须要考虑如何管理端上的状态。前端

在团队中使用 GraphQL 可以很好的解决数据管理的痛点。本文接下来会介绍 GraphQL 声明式(declarative)获取数据的方法，这将简化数据管理的难度，而且提高网络性能。还会介绍 Apollo² 如何经过一系列对开发者体验好的工具，提升工程师的开发效率。react

译注1：optimistic UI 是一种 UI 设计模式。例如，你在微信上发送消息会直接显示，而不用等到消息的网络请求成功或失败后再显示。optimistic UI 的数据管理很复杂，须要先显示模拟数据，再等待网络请求成功或失败后，再显示真正的数据。经过 Apollo 能够轻易地实现 optimistic UI。
译注2：Apollo 是实现，GraphQL 是标准，和 JS/ECMA 的关系同样。express

开发者体验

Apollo 能够帮助团队更快地实现功能上线，由于它对开发者的体验很是好。Apollo 目标是"让各端的数据管理变得简单"(simplify data management across the stack)。经过 Apollo Client、Apollo Server 和 Apollo Engine，之前须要花上一些功夫实现的功能，好比全栈缓存、数据规范化、optimistic UI，如今变得很简单。redux

请求你所要的数据

GraphQL 强类型查询语言的特性，使得开发者能够利用牛逼的工具来请求 GraphQL 接口。借助 GraphQL 内省系统(introspection system)，开发者能够查询 GraphQL schema ³信息，包括字段和类型。内省系统拥有一些很是炫酷的功能，好比自动生成的文档、代码自动补全等等。后端

译注3：schema 用于描述你所要数据的结构和字段，如：设计模式

{
   dogs {
     id
     breed
     image {
       url
     }
     activities {
       name
     }
   }
 }

GraphQL Playground
Prisma 团队开发的 GraphQL Playground 工具是一款很是优秀的 IDE，它能够把自定义的 schema 和查询历史自动地生成文档。只要看一下，你就知道 GraphQL API 中有哪些能获取到的数据，而不用研究后端代码或了解数据来源。api

Apollo Server 2.0 内置了 GraphQL Playground，更方便你浏览 schema 和执行查询命令。数组

Apollo DevTools
Apollo DevTools 是 Chrome 的扩展程序，能够查询 Apollo 的前端缓存(Cache)，记录查询(Queries)和变动(Mutations)。你还可使用 Apollo DevTools 中的 GraphiQL 来方便地测试前端查询。缓存

简化前端代码

若是你使用过 REST 和状态管理库，如 Redux，为了发一个网络请求，你须要写 action creators、reducers、mapStateToProps 并集成中间件。使用 Apollo Client，你不再用关系这些东西。Apollo Client 解决了一切，你只须要专一于查询，而不须要写一堆状态管理的代码。微信

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "https://dog-graphql-api.glitch.me/graphql"
});

有团队声称他们切换成 Apollo Client 后，删除了上千行状态管理代码和一堆复杂逻辑。这得益于 Apollo Client 不只支持远程数据管理，还支持本地数据管理， Apollo 缓存就是当前应用全局状态的单一事实来源。

现代化的工具

Apollo platform⁴ 可让团队使用现代化的工具，帮忙他们快速发现错误、查看 API、开发具备挑战的缓存功能。

译注4：Apollo platform 是云平台。Apollo 在本文中有两层含义，首先 Apollo 是 GraphQL 的一个开源实现，其次 Apollo 是开发 Apollo platform 、Apollo Client 、Apollo Server 等产品的公司。

Apollo Engine 是 GraphQL 生态系统中惟一能够为你的 API 提供监控和分析的工具。Engine 能够显示每一个 resolver⁵ 的埋点指标，能够帮忙你定位错误，能够分析 schema 中请求的每一个字段的分布频率。你还能够将这些数据传输到你正在用的其余分析平台，如 DataDog，并在某些数据超过报警阙值设置时进行报警。

译注5：resolver 处理返回字段的函数

声明式数据获取

使用 GraphQL 的一个主要优势是它有声明式数据获取的能力，不须要前端请求多个接口，不须要手动的聚合数据，只须要你精确地描述你所要的数据，而后 GraphQL 就会将你要的数据返回给你。而使用 REST ，你须要调用每个接口，并过滤出你要的数据，而后将过滤后的数据构形成组件所须要的结构。

GET /api/dogs/breeds
GET /api/dogs/images
GET /api/dogs/activities

REST 的方法不只很差使，并且容易出错，难以跨平台重用逻辑。对比一下 GraphQL 声明式的方式：

const GET_DOGS = gql`
  query {
    dogs {
      id
      breed
      image {
        url
      }
      activities {
        name
      }
    }
  }
`;

在上面，咱们定义了咱们想要从服务端获取的对象的结构。GraphQL 负责组合和过滤数据，同时返回咱们想要的数据字段和结构。

如何使用 GraphQL 查询？Apollo Client 构建了 GraphQL 声明式请求数据的方法。在 React 应用中，获取数据、跟踪加载和错误状态以及更新 UI 的全部逻辑，都封装在一个 Query 组件中。这种封装方式使数据获取组件和展现组件很容易的组合在一块儿。让咱们看看，如何在 React 应用中使用 Apollo Client 获取 GraphQL 数据：

const Feed = () => (
  {/* 数据获取组件 Query*/} 
  <Query query={GET_DOGS}>
    {/* 展现组件：由 Error、Fetching、DogList 等组成的函数组件 */}
    {({ loading, error, data }) => {
      if (error) return <Error />
      if (loading || !data) return <Fetching />;
    
      return <DogList dogs={data.dogs} />
    }}
  </Query>
);

Apollo Client 管理整个请求的周期，从请求开始到请求结束，包括为你跟踪加载和错误状态。这里不用设置中间件，不用写模板代码，不用重构的数据结构，不用关心请求缓存。你所须要作的就是描述你组件要的数据，而后让 Apoolo Client 去完成那些繁重的工做。

当你使用 Apollo Client 时，你会发现你能删除不少不须要的数据管理方面的代码。具体可以删除多少行代码，要根据你项目的状况来判断，但有些团队声称他们删除了数千行代码。要了解更多 Apollo Client 的牛逼功能，例如 optimistic UI、从新获取、分页获取，请查看咱们的状态管理指南。

提高网络性能

在许多状况下，在现有的 REST 接口层之上增长 GraphQL API 层，能够提升你 App 的网络性能，特别是在网络差的状况下。虽然，你应该经过网络性能监控来衡量 GraphQL 如何影响你的 App，但你们一般认为 GraphQL 经过避免客户端与服务端的往返通信(round trips)，和减小请求数据的大小来提高网络性能的。

更少的请求数据

由于从服务端返回的响应中只包含你指定的查询数据，因此 GraphQL 相对于 REST 能够显著地减小请求数据的大小。让咱们看看前面文章中的例子：

const GET_DOGS = gql`
  query {
    dogs {
      id
      breed
      image {
        url
      }
      activities {
        name
      }
    }
  }
`;

GraphQL 服务响应中只包括 dogs 对象的 id、breed、image、activities 字段，即使 REST 层的接口 dogs 是带有 100 个字段的对象也是如此，全部多余的字段都将在返回给客户端以前过滤掉。

避免往返通信(round trips)

因为每一个 GraphQL 请求只返回一个响应，使用 GraphQL 能够帮助你避免客户端到服务端的往返通信。使用 REST，请求一个资源就是一次往返通信，往返通信会快速地增长。若是你请求要列表中的每一项，每一项都须要一次往返，每一项中的每一个资源也须要一次往返，总次数就是两者的乘积⁶，这就致使了请求时间过长。

译注6：极端 REST 例子，列表长度 N，每一项 3 个资源，请求次数就是 3*N

GET /api/dogs/breeds
GET /api/dogs/images
GET /api/dogs/activities

使用 GraphQL，每一个查询表明一次往返通信。若是你但愿进一步的减小往返，你能够实现查询批处理(query batching)，将多个查询封装到单个请求中。

产品案例

虽然 GraphQL 规范是由 Facebook 在 2015 年公布的，可是自 2012 年以来，GraphQL 就是 Facebook 移动应用开发的重要组成部分。

在 Apollo 团队，咱们发现 GraphQL 为咱们现有方案中遇到的不少问题提供了出色的解决方案，如今咱们用它来优化咱们的技术基础设施。几年来，咱们和开源社区、客户、合做伙伴一块儿，为开源项目 Apollo 带了了诸多创新。咱们很骄傲，Apollo 适用于各种公司，从创业公司到大型企业。

除了咱们本身的经验，咱们还收到了积极地在生产环境中使用 Apollo GraphQL 的企业客户的普遍反馈、贡献和支持。一些最值得借鉴的案例是：

The New York Times(https://open.nytimes.com/the-...: 学习 The New York Times 如何从 Relay 切换到 Apollo，实现他们 App 的 SSR 和持久化 queries。
Airbnb(https://medium.com/airbnb-eng...: Airbnb 在 Apollo 平台上下了重注，去强化他们微服务的数据层。
Express(https://dev-blog.apollodata.c...:使用易上手的 Apollo 分页功能，优化咱们团队的关键应用。
Major League Soccer(https://dev-blog.apollodata.c...: 团队的数据管理工具从 Redux 切换到了 Apollo，帮忙他们删除了几乎全部的 Redux 代码。
Expo(https://dev-blog.apollodata.c...: 使用 Apollo 开发 React Native App 使得团队能够专一于改善产品功能，而不是写数据抓取的逻辑。
KLM(https://youtu.be/T2njjXHdKqw): 学习 KLM 团队如何使用 GraphQL 和 Apollo 扩展他们的 Angular app。