Headless CMS 是目前前端开发中越来越流行的一种技术。它的出现，大大地方便了前端开发人员在构建网站与应用时所需要的数据获取和交互。而最近几年，GraphQL 也在社区中越来越受到关注，并成为了很多应用的默认查询语言。在这篇文章中，我们将探讨如何使用 Headless CMS 构建基于 GraphQL 的 API，帮助开发者更高效地构建应用程序。
Headless CMS 简介
Headless CMS 是一种以 Content-As-A-Service（CaaS）模式运行的内容管理系统。Headless CMS 不同于传统的 CMS，它不仅仅提供内容管理的功能，还提供了数据获取和管理的 API。Headless CMS 使得开发人员可以专注于构建应用程序，而无需关心数据存储和内容管理的问题。同时，Headless CMS 还提供了一些高级功能，如版本控制、权限管理等。该技术可以应用于各种应用场景，如网站、iOS/Android 应用、AR/VR 等。
GraphQL 简介
GraphQL 是 Facebook 公司在 2012 年提出的一种新的数据查询和操作语言。GraphQL 与传统的 API 不同，它可以让客户端自由地定制返回数据的结构，从而避免了传统 REST API 中的 over-fetch 和 under-fetch 问题。同时，GraphQL 还提供了一些高级功能，如批量查询、查询别名、变更等。
GraphQL 的工作原理是客户端向服务器发送查询请求，服务器通过解析查询串生成查询计划，并通过 resolver 函数实现计划中对应的操作，最终返回数据给客户端。
Headless CMS 和 GraphQL 的组合
Headless CMS 和 GraphQL 的组合，可以更好地帮助开发人员构建应用程序。Headless CMS 为开发人员提供了数据接口，GraphQL 可以作为前端的查询语言，实现前端所需要的数据精确获取。
下面，我们将以 Strapi CMS 为例，探讨如何使用 Headless CMS 构建基于 GraphQL 的 API。
Strapi CMS 简介
Strapi 是一个全新的 Headless CMS 工具，它使用 Node.js 构建。该系统提供了一些非常有用的工具，如模型（模式）服务、插件库等。模型服务可以让用户创建自己的数据库模型，插件库为用户提供了一些有用的插件，如 Google Drive、Email 集成、Algolia 搜索等。
基于 Strapi CMS 构建 GraphQL API
我们将在 Strapi CMS 中建立一个简单的内容模型，用于保存图书信息，并将其对应到 GraphQL API 进行查询。该模型包含以下属性：
- -------- - ----------- - ----------- - ----------- - --------------- - -----------------
安装 Strapi
使用 npm 安装 Strapi，安装完成后可以通过 strapi new appName 命令创建新的 Strapi 项目。在创建项目的过程中，选择 GraphQL 作为 API 插件。
--- ------- ------------ -- - -- ------ ------ --- ---------- ------------ - -- ------ --
建立内容模型
在 Strapi 中，我们可以很容易地建立一个内容模型。在 Strapi 后台管理中，点击左侧的 Content-Types Builder 菜单，在 Content-Types Builder 界面中，点击 Add new Collection Type 按钮创建一个新的内容模型。
然后，我们创建一个 Book 的内容模型，该模型属性如下：
- --- ------ - ------ ------ - ------- -------- -- ------ - ------ ------ - ---------- -------- -- --------- - ------------ ------
添加字段
同样，在 Strapi 中，我们可以在现有的内容模型中添加字段。
添加一个作者（Author）和出版社（Publisher）模型。我们需要在 Settings->Users & Permissions 中开启所有模型的 find 和 findone 权限。
添加数据
我们可以在 Strapi 后台管理中添加数据。点击 Collection Types，在 Book 中添加一些数据，如下图所示：
查询数据
现在我们已经完成数据存储的设置，接下来，我们需要为我们的 API 创建一个 GraphQL 模式。
首先，创建 ./plugins/graphql/schema.graphql 文件，并且将如下代码添加进去：
---- ---- - --- ------ ------ ------ ------- ------ ------ ------ ---------- --------- ------------ ------ - ---- ------ - --- ------ ----- ------ ------ ------ - ---- --------- - --- ------ ----- ------ ------ ------ - ---- ----- - ------ ------ -------- -------- ----------- ----------- -
我们的模型中共有三个类型：Book，Author 和 Publisher。
然后，我们需要定义查询解析：
创建 ./plugins/graphql/config/schema.graphql.js 文件，并且将如下代码添加进去：
----- - -------------------- - - ---------------------------------
----- - ------------- - - ---------------------------------
----- - ----------- - - ---------------------------
----- - ------- ---------- - - ----------------------------------------
----- - ------- ------------ - - ------------------------------------------
----- - ------- --------------- - - ---------------------------------------------
----- ------ - ----------------------
--------- -
---- ----- -
------ ------
-------- --------
----------- -----------
-
--
---------- ---
---
----- -------------------- - ----------------------
--------- -----------
---------- ---
---
----- ---------------------- - ----------------------
--------- -------------
---------- ---
---
----- ------------------------- - ----------------------
--------- ----------------
---------- ---
---
----- -------------- - ---------------
----------- -
---------------------
-----------------------
--------------------------
--
--------- -
---- ----- -
------ ------
-------- --------
----------- -----------
-
--
---
-------------- - -
------- ---------------
------------ -------------
------- ---------------
--------- -----
---
--最后，我们还需在 ./config/middleware.js 文件中添加 graphql 中间件：
-------------- - -
--------- -
-------- -
-------- -----
----- ----------
-- ---- -------- ----
--
--
----- -
------- --------- --------------- --------- ------- ------------ --------
------ ---
------ ---------- ----------
--
--现在我们已经完成了 GraphQL 配置，可以通过访问 http://localhost:1337/graphql 查询数据。
----- -
----- -
-----
-------
----
-
-
-该查询将返回以下结果：
-
------- -
-------- -
-
----- ----
-------- ---- -- ----- ------
--------- -
------- ---- ------
-
--
-
----- ----
-------- ------- - --------
--------- -
------- ---- ------
-
--
-
----- ----
-------- ---- ------- -- --- -----
--------- -
------- ----- ---------
-
--
-
----- ----
-------- ---- ----- --------
--------- -
------- --- ----- -----------
-
-
-
-
-总结
本文中，我们使用了 Strapi CMS 作为 Headless CMS，并使用 GraphQL 作为前端查询语言，构建了一个简单的图书数据管理网站。我们教授了如何创建一个内容模型，并在 GraphQL 模式中将该模型映射到一个 GraphQL API 中。同时，我们还探讨了如何设置查询解析器和中间件以服务于 GraphQL API。通过学习本文，你将了解到 Headless CMS 和 GraphQL 的优点，以及如何将它们组合在一起以加速应用程序开发的流程。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64814e4c48841e98940c3886