在当今网页开发的领域中，Headless CMS 受到了越来越多的关注。Headless CMS 是指没有前端界面的 CMS（内容管理系统），其数据可以通过 API 使用。这种方式使得开发人员可以更加自由地选择开发框架、编程语言和前端技术，同时也使得 CMS 系统变得更加灵活和可定制。
GraphQL 是一种现代化的查询语言和 API 官方规范，它允许前端开发人员精确地查询它们所需要的数据。本文将介绍如何使用 GraphQL 实现 Headless CMS。
什么是 GraphQL？
GraphQL 是 Facebook 开发的一种开放源代码的规范，它提供了一种强类型、可选择的查询语言，允许前端设计师和开发人员精确地查询他们所需要的数据。GraphQL 能够将多个数据源的信息合并成一个单一请求，这一点非常适用于使用 Headless CMS。GraphQL 也是一种非常适于现代化的 API 开发方式。
为什么使用 GraphQL 实现 Headless CMS？
Headless CMS 与传统的 CMS 相比具有很多优势：
- 资源利用率：开发人员可以自由地选择他们想要使用的前端技术，而不必被 CMS 的限制所束缚；
- 快速开发和迭代：Headless CMS 允许开发人员快速搭建、测试和迭代解决方案，因为他们可以更加自由地进行代码的使用，并利用其他 API 系统；
- 多设备支持：由于多设备越来越普遍，因此对于 CMS 系统能够良好支持各种设备非常重要。
与此同时，GraphQL 也有其自身的优势：
- 减少请求数：GraphQL 可以将不同的数据请求合并为一个单一请求；
- 渐进式实现：GraphQL 可以在无需完全实现新的 API 的情况下逐渐采用；
- 抽象数据层：GraphQL 依赖于类型系统和位于中间层的 Resolvers（解析器）。这种方式可以使得从数据库中获取更清晰，并可以通过简化存储器实现对多个数据库和数据源的查询；
- 自动生成 API：开发人员可以利用 GraphQL 生成自定义前端和后端 API，自动完成功能。
实现 GraphQL Headless CMS
在下面的示例代码中，我们将介绍如何使用 Strapi 来实现 Headless CMS，并学习如何使用 GraphQL 通过 API 访问它。
使用 Strapi
Strapi 是一个开源的 Node.js CMS 框架，具有灵活的 API、内容管理功能和数据关系管理等。使用 Strapi 首先需要安装 Node.js，然后使用 npm 命令安装 Strapi：
# 安装 Strapi npm install strapi -g # 使用 Strapi 命令创建一个新项目 strapi new my-project
创建 GraphQL API
Strapi 默认情况下使用 REST API，达到 Headless CMS 的目的，我们需要使用 GraphQL API。然而在 Strapi 中，GraphQL API 并不是默认开启的，需要进行配置和安装。
# 安装 @strapi/plugin-graphql npm install @strapi/plugin-graphql
一旦安装完成，需要进行配置：
-- -------------------- ---- -------
-------------- - -- --- -- -- --
----- ----------- -----------
----- --------------- ------
------ -
----- -
------- ----------------------- ---------------
--
--
-------- -
--------- -----------
-------- ------
----------- -----
----------------- -----
----------- --
------------ ----
------------- -
----- -
------- -
------------------------
--
--
--
--
---上述代码设置了 GraphQL 的配置信息，包括端口、绑定的地址、秘钥和允许的请求数量和等等。还需要在项目根路径中创建 GraphQL 模型，示例代码如下：
-- -------------------- ---- -------
-- -----------------------
---- --------
----- - ----------------- - - -----------------------------
----- - -------------- - - ------------------------
-------------- - -
----------- -
---- ---- -
--- ---
------ -------
-------- -----
------- -------
------------- ------
----------- -------
----------- -------
-
--
------ -
------------ ---- ------ ----- ------
-------- ----- ----
--
--------- -
----------------- -------- -------- ------------ ------- -------- ------------- -------- ----
-------------- ---- ------ ------- -------- ----------- ------- ------- ------------- -------- ----
-------------- ----- ----
--
--------- -
------ -
------ ----- ----- ----- -- -
------ --------------------------- ------- ---
--
----- ----- ----- ----- -- -
------ ------------------------------ ---- ------- ---
--
--
--------- -
----------- ----- ----- ----- -- -
----- ------ - ----- ----------------------------------
------ ---------------------- - ------ ------------------ ---
--
----------- ----- ----- ----- -- -
----- ------ - ----- ----------------------------
- ---- ------- --
- ------- -
--
------ ---------------------- - ------ ------------------ ---
--
----------- ----- ----- ----- -- -
----- ------ - ----- ----------------------------- ---- ------- ---
------ ---------------------- - ------ ------------------ ---
--
--
--
-随后需要删掉 Strapi 旧的 REST API，或者通过中间件等高效办法进行运行对应的 API 实现。
使用 GraphQL API
现在可以通过 GraphQL API 对 Strapi 中的数据进行访问。
-- -------------------- ---- -------
----- -
------------ --- ------ -- -
--
-----
------- -
----- -
---
---------------
-
----
-
------
------------
----------
----------
-
-上述代码显示了如何使用 GraphQL API 获取标题为 blog 的文章列表。GraphQL API 通过单个请求实现了多个数据查询请求，可以提高效率和资源使用效率。
总结
本文介绍了 Headless CMS 和 GraphQL 的优势，以及如何使用 Strapi 来实现 GraphQL Headless CMS API。如果您想要尝试使用 Headless CMS，那么 GraphQL API 可能是最适合您的一种选择。如果您想要进一步了解相关技术，建议您查看文档，实践相关的示例代码，并与社区中的开发者协作学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f04a2bf6b2d6eab3a45676