如何在 Headless CMS 中使用 GraphQL，从此告别 RESTful API-JavaScript中文网-JavaScript教程资源分享门户

如何在 Headless CMS 中使用 GraphQL，从此告别 RESTful API

在现代 Web 应用开发中，使用 RESTful API 是非常常见的一种方式，但随着技术的不断发展，GraphQL 已经成为一个很受欢迎的替代方案。尤其在 Headless CMS 中使用 GraphQL，更能够提供更好的用户体验、更高效的数据处理和更灵活的数据查询。

什么是 Headless CMS？

Headless CMS 是一种在 Web 应用程序架构上，前端和后端分离的内容管理系统。与传统 CMS 不同的是，Headless CMS 只关注到了内容管理方面，它只提供了处理和存储内容的功能，却不对内容的渲染过程负责。这使开发人员得以更加自由地在任意环境中自主使用数据。

Headless CMS 通常提供两种 API 接口：RESTful API 基于传统的 HTTP协议，使用方便，但交互广泛；而 GraphQL 更加灵活，轻便，但不太容易使用。

什么是 GraphQL？

GraphQL 是一种用于 Web 应用程序的查询语言，最初由 Facebook 进行开发和维护，用于 React 中构建客户端应用。 GraphQL 的出现是为了解决 RESTful API 的一些缺陷，实现更好的数据平衡问题。

具体来说，GraphQL 可以根据客户端的请求，精确地返回请求的数据，比传统的 RESTful API 更灵活、更快速，同时它也可以输出有关服务功能的完整信息。这使得使用 GraphQL 更容易开发跨平台 web 应用程序。

为什么要使用 GraphQL?

传统的 RESTful API 的最大问题之一是“over-fetching”和“under-fetching”。

从应用的角度来看，“over-fetching”是指当我们尝试从服务器中检索数据的时候，我们得到了从我们不需要的表的信息一起返回的所有可能被用到的信息。此时，API的速度和响应时间仅仅受到限制。

另一方面，我们也有“under-fetching”问题，这是因为我们需要检索的数据已破碎在多个表中，我们需要发出多次请求，而这些请求的数据量和时间成本是巨大的。

相比之下，GraphQL 提供了精确的结果查询，从而大量减少数据传输量和数据请求次数，有着卓越的性能表现。

除此之外，GraphQL 还具有以下优点：

更清晰的数据结构：GraphQL API 向客户端提供了一整套数据模型，并且这些模型非常容易被理解。
更好的开发体验：GraphQL 可以让前端工程师在没有后端接口的情况下，提前定义需要请求的数据结构，然后后端来实现这些接口。
更少的通信：GraphQL 在上一步完成前，不会发送任何未经请求的数据。因此，它更加易于扩展和更改。

由此可见，使用 GraphQL 比传统的 RESTful API 更加灵活、更加高效，可以大幅改善 Web 应用程序的性能和用户体验。

如何在 Headless CMS 中使用 GraphQL?

根据不同的 Headless CMS 实际情况，这里以 Strapi 为例，介绍在 Headless CMS 中应如何使用 GraphQL。

Strapi 介绍

Strapi 是一种开源的 Headless Content Management System (CMS)，它可以很好地为前端应用程序提供 API 接口，而且它相对于其他 Headless CMS 而言是很好上手的。

Strapi 支持 RESTful API 和 GraphQL API，并且为你的应用程序提供了一个大量的默认值提供了 HTTP API 和 WebSocket API。它内置了自定义权限、角色和多种身份验证，可以轻松地扩展和集成到不同的平台上。

配置 Strapi GraphQL API

首先，要安装 GraphQL API 插件以启用 Strapi 在 GraphQL API 中的支持。

- ---- --- ---------------------

安装完之后，在 Strapi 管理面板中找到「Plugins」项并启用「graphql」插件。

构建 GraphQL 查询

Strapi API 的请求类型的格式为： /{contentType}/{id}。例如，需要请求一篇文章的具体信息，请求的 URL 是 http://localhost:1337/articles/1。

在 GraphQL 中，为每个内容类型创建一种查询。下面是一个用于查询文章的示例：

----- -
  -------- -
    ---
    -----
  -
-

这条查询语句将获取所有文章的 ID 和标题。其中， articles 是文档中定义的 model 的单数名称（例如，在 Strapi CMS 中，内容类型 Articles 的单数名称是 Article）。

构建 GraphQL 变异操作

在 Strapi GraphQL API 中，变异操作主要用于实现创建、修改或删除对象等操作。

在 Strapi 中，变异操作与 GraphQL 查询类似，也由 mutations 名称定义，并且具有一个返回类型和一组输入变量。

以下是创建文章条目的示例：

-------- -
  -------------------- -
    ----- -
      ------ ------ --------
      -------- ----- -- - ---- ---------
    -
  -- -
    ------- -
      -----
      -----
    -
  -
-

此语句将创建一篇新文章，标题为“Hello World！” 并返回新文章的标题和slugg。

构建 GraphQL 订阅

在 GraphQL 中，订阅允许语句检测与已经连接的服务器端数据的更改，从而可以实时更新客户端内容。

以下是 Strapi 中的文章订阅示例：

------------ -
  ------- -
    ------ -
      ------------ --------- --------
    -
  - -
    ---- -
      ----
      -----
    -
  -
-

这条语句用于监视文章资源的变化并触发事件。当创建或更新文章时，将在客户端接收到新文章的 slug 和标题。

总结

使用 GraphQL，从此告别 RESTful API，并从 Strapi GraphQL API 中获得更灵活、高效和更好的用户体验。我们可以对 Strapi 使用 GraphQL 查询、变异操作和订阅操作，并实现定点查询、减少请求数量、简化表单提交流程等。

正如我们所看到的，尽管 Strapi API 看似浓郁而简单，GraphQL 要求我们定义类型-数据结构之间的严格规则，以允许前端应用程序特定地提出请求，并执行特定的操作。在 Headless CMS 中使用 GraphQL 之前，我们应该花时间了解了 GraphQL 的查询结构，并依据实际业务需要构建合适的查询。

这样，我们的前端应用程序将能够更加灵活而有效的执行请求，从而提高组成 Headless CMS 的所有服务的总体性能。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/64abc82348841e989479cc40