前端开发人员喜爱 GraphQL 的 5 个理由

作为前端开发者，我们除了要创建我们敬爱的设计师提供的精美 UI、处理复杂的应用程序逻辑和组件架构之外，还要处理大量的数据操作。在本文中，我将讨论如何通过使用 GraphQL 来提高前端开发者的工作效率并获得更好的开发体验。

可能和大多数开发者一样，我以前也使用过 REST API，并且非常喜欢它。但最近有机会接触了 GraphQL，我立刻就爱上了它。
原因如下：

1）GraphQL 只有一个端点

使用 REST API 时，您会被大量的端点包围，因为它们的配置基于它们所代表的应用程序实体的名称。此外，每个实体都有不同的方法来操作其数据（POST、GET、DELETE、PUT、PATCH）。考虑到所有这些因素，
基本的 REST API 看起来如下图所示：

随着复杂性的增加，将会有更多的实体和更具体的端点/查询......

GraphQL 来救援🎉 GraphQL 仅使用一个端点！

GraphQL 服务器在单个 URL/端点上运行，通常是 /graphql，并且对给定服务的所有 GraphQL 请求都应指向此端点。

2）GraphQL 是自文档的

开发大型应用程序、面临截止日期、难以应对或优柔寡断的客户，这些都是开发人员的日常经历。说实话，有时候，编写 API 文档并非优先级最高的任务。因此，开发人员的生产力和开发体验 (DX) 可能会下降，因为他们需要更多时间来了解开发人员的具体需求，让其他开发人员加入项目也会变得更加困难等等……

GraphQL 再次来救援🎉 GraphQL 是自文档化的！

GraphQL 文档将让前端开发人员了解可能发生的所有变化。

3）不再出现​​数据获取不足/过度的情况

RESTful API 为我们假设了哪些实体的信息应该组合成一个整体。它们不考虑应用程序的设计。
话虽如此，前端开发人员通常会获取比他们需要在屏幕上显示的信息更多的信息。这被称为过度获取。
另一方面，有些屏幕需要一些额外的信息，而这些信息我们无法通过一次 GET 请求获得。这被称为数据不足。为了解决这个问题，我们会再次发出请求来获取我们需要的数据。
好的，现在我们解决了数据不足的问题，但请记住，我们只需要一点点额外的信息，所以我们现在又出现了数据过度获取的情况（我闻到了无限循环的味道😅）。

GraphQL再次来救援🎉 GraphQL 让我们查询我们真正需要的数据！

向您的 API 发送 GraphQL 查询并获取您所需要的内容，不多也不少。

GraphQL 实际上是一种查询语言（Graph Q uery Language），它允许我们编写自己的查询。这样，我们可以根据给定的设计来决定需要获取哪些信息。它也很简单：查询使用类似对象的语法编写，您可以指定键并返回键值对，如下图所示：

4）GraphQL 游乐场

这让我们来到了 GraphQL 的游乐场 - GraphiQL。GraphiQL 是一款强大的工具，它能让你测试查询、查看响应、查看所需字段的文档、架构和类型。所有内容都已输入，甚至还提供了自动完成功能，为操作画龙点睛。
你只需在后端启用 GraphiQL（BE 开发人员会自行完成），并在 URL 中输入你唯一的端点即可。

以下是免费使用的 Rick and Morty API 的示例：

5）Apollo客户端

尽管 Apollo Client 并非 GraphQL 的开箱即用部分，但它让 DX 变得更加便捷（……文章标题：前端开发者喜爱 GraphQL 的 4 个理由可能不那么吸引人）。最重要的是，Apollo Client 为我们提供了三个易于使用的自定义数据操作钩子：useQuery、useLazyQuery和useMutation。

useQuery - 当我们需要在组件挂载时获取数据时使用它。它返回一个包含数据、错误信息（如果有）和加载状态的对象。
你只需要传递一个查询和一个选项对象（如果有变量，以及任何需要在 onCompleted 上执行的操作等等）。

const { loading, error, data } = useQuery(SOME_QUERY, options)

useLazyQuery - 当我们需要获取某些事件的数据时（例如点击搜索按钮）会使用它。它返回一个数组，其中包含一个用于处理某些事件的函数和一个包含数据、错误信息（如果有）和加载状态的对象。

const [fetchOnSearch, { error, loading, data }] = useLazyQuery(SOME_QUERY, options)

useMutation - 我们在需要修改数据时使用它。它返回一个数组，其中包含一个修改数据的函数和一个包含数据的对象，如果存在错误，则返回错误信息，以及加载状态。

const [fetchOnSearch, { error, loading, data }] = useMutation(MUTATION_QUERY, options)

结论

GraphQL 由 Facebook 的开发者创建，目前已被多家大型公司采用，这意味着它不会消失。所以，如果你是一名前端开发者，正在寻找新的尝试，那就从 GraphQL 开始吧，你可能会爱上它！🥰

...有关更多详细信息，请查看官方GraphQL和Apollo Client文档...