什么是 Headless CMS
Headless CMS 是一种无头式内容管理系统，它将内容从设计和呈现中解耦，只为数据管理和 API 服务提供内容。
与传统 CMS 不同，Headless CMS 不关心内容如何显示。它专注于将内容作为数据提供给任何设备、平台或应用程序。
这种分离数据和样式的设计，可以让团队更加专注于数据管理和开发更广泛的应用程序。另外，它也为编辑人员和开发人员之间的工作分配提供了更高度的灵活性。
目前，市面上有很多已经建立了 Headless CMS 的服务和开源 CMS 工具：Prismic、Contentful、Strapi 等等。而我们在接入 CMS 数据时，使用 GraphQL 是一个很好的选择。
为什么使用 GraphQL
GraphQL 是一种基于类型的查询语言，用于服务端与客户端之间的数据交互。GraphQL 具有以下特点：
- 精确查询：客户端可以精确地指定需要查询的数据，避免了过多或不足的数据载入。
- 单一网络请求：GraphQL 并不强制进行多次请求，这样能减少客户端与服务器之间的通信次数，以及在移动设备上的网络使用。
- 前端编写：前端开发人员可以在可预测的情况下编写和维护数据请求，并且容易协作开发。
- 自文档化：基于类型定义的查询和模式，使得开发者可以快速理解接口。
GraphQL 与传统的 RESTful API 相比，具有强大的优势。GraphQL 执行快速且灵活，是更好的选择。
如何使用 GraphQL 拉取数据——示例代码
下面简单介绍使用 React + GraphQL + Headless CMS 的实战应用。
在使用 GraphQL 拉取数据时，需要安装『apollo-boost』、『react-apollo』等基础组件，我们以使用 Prismic 举例：
-- -------------------- ---- -------
------ ----- ---- --------
------ --- ---- --------------
------ - ----- - ---- ---------------
------ - ------------------- - ---- ----------------
--------- ----- ------- --------------------- --- ------ -- --
--------- ------- -
------ -------
----- -------
------ -------
-
--------- ----------- -
------------ - ------ ------- ----- ------- -- --
-
----- ----- - ----
-
----------- -
----- -
---- -
-----
-----
----
-
-
-
-
--
----- -------- --------------- - -- -- -
------------------- --------------
--- -------- ------ ---- -- -- -
-- --------- ------ ----------------
-- ------- ------ --------- --------------------
------ ----------------------------- ---- -- -- -- -
---- --------
---- ---------------- ---------------- --
---------------------
------------------
------
---
--
--------
--
------ ------- --------以上即是根据 GraphQL 请求，拿到 Prismic CMS 内容数据的示例代码。虽然 GraphQL 的语法可能看起来比较像数据库查询语言，但是目前开发工具们都对内容上的文档和 API 自述文件有很好的支持。
当你在 Apollo 文档站点上浏览时，可以看到查询的文档。这些文档提供了很好的查询支持，并允许你以交互方式进行操作。
总结
Headless CMS 和 GraphQL 是一种非常好的结合，TensorFlow 在最近的更新和版本中也内建了头部 CMS 和标准 API。使用 GraphQL 获取来自 CMS 的数据并进行数据交互，是一种快速高效的数据传输方式，适合做大型跨域的数据传输。并且，由于 GraphQL 可以精确查询数据，它的使用有利于重用和减少不必要的数据载入，提高页面性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e8b8a95b1f8cacd63b01d