Headless CMS 是一个独立的内容管理系统，它提供了许多与显示无关的 API，以帮助开发人员构建客户端应用程序。其中最流行的 API 是 GraphQL，它非常灵活且可以轻松地实现客户端所需的数据查询。
本文将深入探讨 Headless CMS 中 GraphQL 接口的开发，包括查询和变更。我们将在 Strapi CMS 上演示这些概念，并展示如何使用 Node.js 和 Apollo Server 来开发 GraphQL API。让我们开始吧！
概述
首先，让我们了解一下 Headless CMS 是什么。Headless CMS 是一种内容管理系统，其中的内容仅仅是数据。而不是传统 CMS 中的网页、模板和展现层。Headless CMS 可以通过协议（如 REST API 或 GraphQL）暴露出数据，并且这些数据可以被使用各种方式的应用程序（如 Web 应用、移动应用等等）所使用。
现在让我们来看一下 GraphQL，它是一种新的 API 技术，它可以让开发者在一个请求中查询或修改多个数据。GraphQL 也非常灵活，可以适应各种数据结构以及复杂的查询需求。
在本文中，我们将演示如何使用 Strapi CMS 和 GraphQL 一起工作来构建自己的 Headless CMS。
实现查询
在 Strapi 中，默认情况下，所有的内容可以通过 REST API 访问。在安装完成后，我们会得到一个 Web 界面，可以通过该界面查看 API 文档并快速构建 API 请求。我们也可以通过配置 Web 界面来限制 API 的访问，例如，可以限制某些角色的用户访问某些数据。
现在，让我们看一下如何使用 GraphQL 查询这些数据。我们将使用 Apollo Server，它是一个基于 Node.js 的 GraphQL 服务器。
安装依赖
我们需要安装以下依赖：
--- ------- ------------- -------
配置 Schema
现在让我们来配置一个简单的 GraphQL Schema，以便查询我们在 Strapi CMS 中创建的内容。
---- ---- - --- --- ------ ------- -------- ------- ------- ------- - ---- ----- - ------ -------- -
在这里，我们定义了一个名为 Post 的类型，它有 id、title、content 和 author 四个字段。
我们还定义了一个名为 Query 的类型，它包含一个 posts 字段，用于获取所有的文章。
编写 Resolver
现在我们需要编写一个 Resolver，以便实现 Query 中定义的查询。
对于 posts 请求，我们可以访问 Strapi 的 GraphQL API，如下所示：
----- - -------------- - - ----------------------------------
----- --------- ------- -------------- -
------------- -
--------
------------ - -------------------------
-
----- ---------- -
----- -------- - ----- -------------------
------ ----------------- -- --
--- --------
------ -----------
-------- -------------
------- ------------
----
-
-
----- --------- - -
------ -
------ ----- --- --- - ----------- -- -- -
------ ---------------------------------
--
--
--在这个例子中，我们使用了 apollo-datasource-rest 这个第三方插件来创建 StrapiAPI 这个类。StrapiAPI 类继承了 RESTDataSource，这个类的作用是帮助我们轻松地使用 REST API。我们必须提供基本 URL，以便访问 Strapi API。
然后我们实现了 getPosts 方法，它将 REST API 的响应数据转换成 GraphQL 定义的 Post 对象。
最后，我们定义了一个名为 resolvers 的对象，其中包含了我们刚刚编写的 Query 对象，以便进行查询。
启动 Apollo Server
现在我们可以启动 Apollo Server 来提供 GraphQL API 了。
----- - ------------ - - -------------------------
----- ------ - --- --------------
--------- -------
----------
------------ -- -- --
---------- --- ------------
---
---
--------------------------- --- -- -- -
--------------- ------ ----- -- ---------
---在这个例子中，我们先创建了一个名为 server 的 Apollo Server 实例。我们将定义好的 Schema 和 Resolver 放入 ApolloServer 构造函数中。还需指定 dataSources 属性以在 Resolver 中引用数据源。
现在，在浏览器中打开 http://localhost:4000，就可以开始查询了。尝试输入以下查询：
----- -
----- -
--
-----
-------
------
-
-如果一切顺利的话，你应该会看到 Strapi 中的所有文章。
实现变更
除了查询，我们也可以使用 GraphQL 来实现变更（mutation），例如创建、更新以及删除数据。现在让我们来创建一个修改文章的 API。
定义 Mutation
----- ------------- - --- --- ------ ------ -------- ------ ------- ------ - ---- -------- - --------------- ---------------- ----- -
在这里，我们定义了一个名为 EditPostInput 的输入类型，它包含了文章所有的字段。并且我们定义了一个名为 Mutation 的类型，它包括一个名为 editPost 的变更，这个变更将使用 EditPostInput 输入类型并返回 Post 对象。
编写 Resolver
我们需要编写一个 Resolver 来实现 editPost 变更。这个 Resolver 应当包含对 Strapi API 的操作。
----- --------- - -
------ - --- --
--------- -
--------- ----- --- - ----- -- - ----------- -- -- -
----- - --- ------- - - ------
----- ----------------------------------------- ------
----- ---- - ----- ------------------------------------------
------ -
--- --------
------ -----------
-------- -------------
------- ------------
--
--
--
--在这个例子中，我们实现了名为 editPost 的 Resolver，它通过调用 Strapi API 来更新指定 ID 的文章。我们首先从输入类型中解构 id 字段和剩余的字段（...rest），接着调用 Strapi API 来更新文章，最后返回新修改的文章。
测试 Mutation
现在在浏览器中执行以下变更：
-------- -
--------------- - --- ---- ------- ----- ------ -- -
--
-----
-------
------
-
-如果你的 API 已经能够正常工作的话，你应该会看到 Strapi 中 ID 为 1 的文章作者已经从指定的作者修改为 "John Smith"。
总结
在本文中，我们使用 Strapi CMS 和 GraphQL API 演示了 Headless CMS 的开发过程。随着 Web 应用程序的复杂性不断提高，Headless CMS 以及 GraphQL 等技术已经成为现代 Web 开发人员的理想选择。本文中的代码示例可以作为开始使用 Headless CMS 和 GraphQL 的指南。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64bfc3589e06631ab9c43557