资讯专栏INFORMATION COLUMN

GraphQL 和 Apollo 为什么能帮助你更快地完成开发需求?

LucasTwilight / 2834人阅读

摘要:开发者体验可以帮助团队更快地实现功能上线,因为它对开发者的体验非常好。可以显示每个的埋点指标,可以帮忙你定位错误,可以分析中请求的每个字段的分布频率。产品案例虽然规范是由在年公布的,但是自年以来,就是移动应用开发的重要组成部分。

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

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

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

开发者体验

Apollo 可以帮助团队更快地实现功能上线,因为它对开发者的体验非常好。Apollo 目标是"让各端的数据管理变得简单"(simplify data management across the stack)。通过 Apollo Client、Apollo Server 和 Apollo Engine,以前需要花上一些功夫实现的功能,比如全栈缓存、数据规范化、optimistic UI,现在变得很简单。

请求你所要的数据

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


译注3:schema 用于描述你所要数据的结构和字段,如:

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

GraphQL Playground
Prisma 团队开发的 GraphQL Playground 工具是一款非常优秀的 IDE,它可以把自定义的 schema 和查询历史自动地生成文档。只要看一下,你就知道 GraphQL 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 platform4 可以让团队使用现代化的工具,帮忙他们快速发现错误、查看 API、开发具有挑战的缓存功能。

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

Apollo Engine 是 GraphQL 生态系统中唯一可以为你的 API 提供监控和分析的工具。Engine 可以显示每个 resolver5 的埋点指标,可以帮忙你定位错误, 可以分析 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*/} 
  
    {/* 展示组件:由 Error、Fetching、DogList 等组成的函数组件 */}
    {({ loading, error, data }) => {
      if (error) return 
      if (loading || !data) return ;
    
      return 
    }}
  
);

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,这就导致了请求时间过长。

译注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。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103141.html

相关文章

  • GraphQL 技术栈揭秘

    摘要:关注业务,而不是技术将数据需求放在它们所属的客户端。技术栈中的每一部分都起着作用技术栈中所有部分之间的协作可以借助缓存来完成。现在,我们来看看另一个贯穿整个技术栈的功能的例子。你可以认为是首个内置细粒度查看的技术。 本文整理自2017年 GraphQL 峰会上的演讲,详述缓存、追踪、模式拼接和 GraphQL 未来发展等有关话题。 Facebook 开源 GraphQL 至今已两年有余...

    zzbo 评论0 收藏0
  • 全栈 React + GraphQL 教程(一)

    摘要:然而,尽管使用有诸多好处,但迈出第一步可能并不容易。为了简化初始教程,我们今天只构建一个简单的列表视图。是我们将在本教程系列中使用的客户端的名称。我们将列表组件命名为。在本教程的其余部分中,你将了解到我们构建一个真正的通信应用的基础。 首发于众成翻译 Part 1——前端:使用 Apollo 声明式地请求和 mock 数据 showImg(http://p0.qhimg.com/t0...

    luxixing 评论0 收藏0
  • [译] Elixir、Phoenix、Absinthe、GraphQL、React Apollo

    摘要:对于每个案例,我们插入所需要的测试数据,调用需要测试的函数并对结果作出断言。我们将这个套接字和用户返回以供我们其他的测试使用。 原文地址:Elixir, Phoenix, Absinthe, GraphQL, React, and Apollo: an absurdly deep dive - Part 2 原文作者:Zach Schneider 译文出自:掘金翻译计划 本文永久链接:gi...

    Cympros 评论0 收藏0
  • Apollo GraphQL 在 webapp 中应用的思考

    摘要:在中应用的思考原文发表在简介熟悉的同学可直接跳过这一章,从实践一章看起。这也是官方建议的最佳实践。也就是说,只有在客户端提交了包含相应字段的时,才会真正去发送相应的请求。在客户端与服务端均不考虑缓存的情况,客户端反而会少一个请求。。。 Apollo GraphQL 在 webapp 中应用的思考 原文发表在: https://github.com/kuitos/kui... 简介 熟悉...

    weapon 评论0 收藏0
  • GraphQL 科普 前端向

    摘要:样例前端传入字段和结构。后台按照前端的需求返回数据。则将前后台通信直接分为两大类和。顾名思义,是默认的操作符,代表查询,是不会给服务端带来副作用的请求。文档文档部分文档就是前端向后台描述所需的字段。降低前后端沟通成本。 简介 showImg(https://segmentfault.com/img/bVbmKX5?w=150&h=150); GraphQL是基于「类型系统」来执行查询的...

    Bmob 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<