GraphQL：前端超能力

什么是 GraphQL？

为什么前端开发人员喜欢使用 GraphQL

出色的开发人员体验

API 文档

表现

前端超级力量

翘曲

2013年，人们开始使用Facebook Graph API构建他们的应用程序。我记得读过一些文章和评论，说人们对API接口感到惊讶，并且觉得它非常易于使用。

甚至无需查看 API 文档，您就可以使用自动完成功能轻松找到所需的正确数据，您只需要找到如何描述所需的信息，然后轰隆隆💣，我们开始吧，自动完成功能令人兴奋。

不仅如此，如果您尝试请求不可用的数据，API 还可以响应有用的错误消息。

此后，人们开始好奇这是如何实现的，以及他们如何在未来的应用程序中实现如此出色的体验。

2015 年，Facebook宣布了一种名为 GraphQL 的新数据查询语言。你猜怎么着？这就是开发人员两年前开始使用 Facebook API 时获得如此出色体验的秘诀。

本文并非 GraphQL 教程。相反，我想强调使用 GraphQL 的好处，以及为什么你应该在下一个项目中尝试一下它。

本文仅关注使用 GraphQL 的积极方面，但这并不意味着 GraphQL 是所有用例的最佳选择并且没有任何问题。

什么是 GraphQL？

正如官方网站所述，GraphQL 是一种用于 API 和运行时的查询语言，用于使用现有数据执行这些查询。简而言之，GraphQL 是一种语法或规范，用于描述如何请求数据。GraphQL 查询很简单，只需将字符串发送到服务器进行解释和执行，然后服务器返回 JSON 响应给客户端。

首先，GraphQL 是 Facebook 针对过度/不足数据获取问题的解决方案。正如公告博客文章所述，问题在于，当 Facebook 开始使用已用于 Web 平台的 API 构建其移动应用时，他们对移动端所需数据与服务器 API 中已有数据之间的差异感到困惑。使用相同的 API 意味着加载更多不必要的数据。此外，移动平台自身也存在 API 请求数量庞大的问题，因此理论上的解决方案非常简单：与其使用多个 REST 端点，为什么不使用一个简单的端点来理解来自客户端（Web 或移动）的查询并返回正确的数据呢？这样就无需多余的数据，也无需额外的 API 调用。

我认为 GraphQL 是我见过最早被采用的技术之一，仅仅四年后，我们就看到一些大公司，例如 Github、Shopify、Twitter 开始使用它。这意义重大，因为 API 是产品开发中最难的部分之一，而且像下面这样的迁移风险很大。但所有这些公司都对自己的选择感到满意，甚至鼓励人们使用它。

为什么前端开发人员喜欢使用 GraphQL

嗯，这是事实。我最近遇到的大多数已经在使用 GraphQL 的前端开发者都向我保证，他们会在下一个项目中使用它。不仅如此，我记得其中一位还告诉我，他会争取用上它，以防团队不使用它😁。

这背后的秘密是由于多种因素造成的：

出色的开发人员体验

GraphQL 生态系统为前端工程师提供了出色的用户体验，因为无论您的应用程序规模大小，您都必须处理从服务器获取数据，如果您使用 REST API 并尝试将其与状态管理库（如 Redux）结合使用，则需要做一些额外的工作，例如添加 redux-saga 来处理数据获取，如果您尝试缓存数据，可能需要进行一些转换来规范化数据，而使用乐观的 UI 策略则需要做大量工作。但是，当您尝试 Apollo-client（最流行的 GraphQL 客户端库之一）时，您可以免费获得所有这些功能，因此您可以将更多精力放在应用程序逻辑上并减少代码样板。Apollo-client 还为 TypeScript、Chrome DevTools 和 VS Code 提供了有用的工具。

API 文档

你还记得 Facebook API 的故事吗？嗯，这就是前端开发人员真正想要从后端得到的 - 一个用于调试和阅读 API 文档的智能工具 - GraphQL 带有一个集成的文档系统，描述了可以查询的模式，几乎每个 GraphQL 实现都免费附带一个工具，它被称为 GraphiQl。

GraphiQl 是一个查询平台，用于运行和调试您的查询并以交互方式探索您的模式文档，因此您无需向后端团队询问属性类型、添加或修改某些内容等。

GraphiQl 游乐场

表现

正如我们之前描述的，QraphQl 是 Facebook 针对数据获取不足/过度问题的解决方案。如果您的目标是构建一个快速的网站，那么数据获取是您需要改进的最重要的方面之一，而 GraphQL 规范将帮助您只检索所需的内容，并且能够在单个请求中检索大量资源，这对性能有巨大的影响。

举个例子，我们正在构建一个帖子动态页面，并且需要显示用户和评论。使用 REST API 意味着我们可能至少需要三个 API 调用：/posts检索/user?postId=X用户数据和/comments?postId=X评论。

使用 GraphQL，我们可以使用一个简单的查询一次性检索所有数据：

{
  allPosts {
    content
    user {
      id
      name
    }
    comments {
      edges {
        id
        content
      }
    }
  }
}

前端超级力量

目前，我们同意 GraphQL 通过强大的工具生态系统帮助改善开发人员体验，并通过解决数据获取过多/不足的问题来提高 Web 和移动性能，但在这一特定部分中，我想从我的角度强调 GraphQL 如何让前端拥有超越团队其他部分的超能力。

我的想法是，因为 GraphQL 非常适应无服务器架构，而且正如我很久以前所想的那样：我很难相信无服务器架构进入市场是为了帮助前端开发人员在不依赖后端或 DevOps 开发人员的情况下制作自己的产品。

作为一名尝试使用无服务器架构构建自己的副项目的前端工程师，处理数据对我来说是件难事。但有了 GraphQL，我只需要描述我的模型及其之间的关系，使用Prisma、Hasura或Faunadb等服务以及一个简单的 GraphQL 模式就可以了。这种体验令人兴奋不已。

翘曲

最后，GraphQL 是一个数据聚合器和抽象层，它可以提高开发速度和性能，并让开发人员（尤其是前端开发人员）更加满意。在这篇博文中，我试图让你了解 GraphQL 如何帮助和改善你的日常工作，我相信只有亲自尝试才能体会到。所以，现在轮到你了，尽快尝试一下。

希望您觉得这篇文章有趣、信息丰富、引人入胜。我非常乐意听听您的评论和想法。

如果您认为其他人应该阅读这篇文章，请发推文、分享并在 Twitter 上关注我以获取下一篇文章。

阅读更多文章👉 http://elazizi.com/