概述
Headless CMS 是一种将内容和后端数据从前端界面中解耦的 CMS 解决方案，使得开发人员可以更加专注于构建用户界面和用户体验。而这种解耦则非常适合创建 Ecommerce 平台，尤其是在需要同时支持多种平台（例如 WEB、APP、微信公众号）时。
本文将介绍如何使用 Headless CMS 和 React 创建一个无头的 Ecommerce。我们将使用 GraphCMS 作为我们的 Headless CMS，并使用 React 作为我们的前端框架。
GraphCMS 简介
GraphCMS 是一种面向 GraphQL 的 Headless CMS 平台。它带有一个易于使用的 Web 客户端，可以直接在节点和关系之间进行查询、修改和删除。GraphCMS 还具有自动生成数据 schema 的能力，使得开发人员可以轻松在应用中集成多个数据源。
创建 GraphCMS 项目
首先，您需要登录 GraphCMS 平台并创建一个新的项目。您可以根据您自己的需要选择空项目或预定义的数据模型来创建项目。创建项目后，您可以立即在 GraphCMS 中添加数据。
在 GraphCMS 中添加数据
在 GraphCMS 中添加数据非常简单。您只需要在 GraphCMS Web 客户端中创建一个新的数据类型，然后添加所需的数据字段。GraphCMS 还支持关系类型，使您可以将不同的数据类型链接在一起并创建有意义的数据关系。
例如，如果您正在创建一个 Ecommerce 平台，则可能需要为每个产品创建一个产品类型，并添加一些必需的字段，如产品名称、价格、描述和品牌。您可以通过创建一个分类别名类型，然后在类别别名类型和产品类型之间创建一个关系来为每个产品添加一个或多个类别别名。
使用 GraphQL 获取数据
为了在 React 应用程序中访问 GraphCMS 数据，我们可以使用 GraphQL。可以使用 GraphCMS 为您的项目生成 GraphQL schema，然后使用这个 schema 来在 React 应用程序中编写数据查询，并使用 Apollo Client 发出这些查询请求。
下面是一个简单的查询，用于获取所有产品：
-- -------------------- ---- -------
----- -
-------- -
--
----
-----------
-----
-----
-
-该查询将返回所有产品的 ID、名称、描述、价格和品牌。
React 简介
React 是一种广泛使用的 JavaScript 应用程序库，用于构建用户界面。React 的主要思想是分离组件的状态和 UI，使开发人员可以轻松地构建可重用的 UI 组件。
React 通常与其它技术配合使用，如 Redux（状态管理），Jest（测试），Webpack（打包器）等。
创建 React 应用
使用 create-react-app 可以非常容易地创建一个新的 React 应用程序。
npx create-react-app my-ecommerce cd my-ecommerce npm start
这将在本地计算机上创建一个新的 React 应用程序，并使用运行起来。您可以访问 http://localhost:3000 查看应用程序。
使用 Apollo Client
为了从 GraphCMS 中获取数据，我们需要使用一个 GraphQL 客户端 - Apollo Client 来跟踪所有的 GraphQL 查询，并在 React 组件中渲染它们。
您可以从 npm 上安装 Apollo Client：
npm install apollo-boost react-apollo graphql-tag graphql -S
在 src/index.js 文件中，您可以实例化 Apollo Client：
-- -------------------- ---- -------
------ ------------ ---- --------------
------ - -------------- - ---- --------------
----- ------ - --- --------------
---- -----------------------------------------------------
--
----------------
--------------- ----------------
---- --
------------------
--------------------------------
-这将为您的应用程序提供一个 ApolloProvider，使得您可以与 GraphCMS 交互并访问 GraphQL 数据。
编写 GraphQL 查询
为了从 GraphCMS 中获取数据，我们需要写一个 GraphQL 查询。您可以使用 graphql-tag 库来构建您的查询：
-- -------------------- ---- -------
------ --- ---- -------------
----- -------------- - ----
----- -
-------- -
--
----
-----------
-----
-----
-
-
-一旦您编写了查询，您可以在 React 组件中使用它，并使用 graphql HOC 转换集成到 Apollo 客户端中：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - -------------- - ---- -----------
----- -------- - -- ----- - -------- ------ -------- - -- -- -
-- --------- ------ -----------------
-- ------- ------ -------- ------
------ -
----
--------------------- -- -
--- -----------------
-----------------------
----------------------------
----------------------
----------------------
-----
---
-----
-
-
------ ------- ---------------------------------这样，您就可以在您的页面上渲染 products 数据。
创建无头 Ecommerce
现在，我们已经了解了如何使用 GraphCMS 和 React，接下来我们将创建一个无头 Ecommerce 应用程序。
创建一个产品清单
首先，我们将创建一个产品清单。创建 Products 组件 (src/components/Products.js)：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------------
------ --- ---- -------------
----- -------------- - ----
----- -
-------- -
--
----
-----------
-----
-----
-
-
-
----- -------- - -- ----- - -------- ------ -------- - -- -- -
-- --------- ------ -----------------
-- ------- ------ -------- ------
------ -
----
--------------------- -- -
--- -----------------
-----------------------
----------------------------
----------------------
----------------------
-----
---
-----
-
-
------ ------- ---------------------------------创建产品页面
然后我们将创建一个单独的产品页面。创建 Product 组件 (src/components/Product.js)：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------------
------ --- ---- -------------
----- ------------- - ----
----- ----------------- ---- -
----------- ---- -
----
-----------
-----
-----
-
-
-
----- ------- - -- ----- - -------- ------ ------- - -- -- -
-- --------- ------ -----------------
-- ------- ------ -------- ------
------ -
-----
-----------------------
----------------------------
----------------------
----------------------
------
-
-
------ ------- ---------------------- -
-------- -- ----- -- -- --
---------- - --- --------------- --
---
-----------创建路由
最后，我们将创建一个 Router 组件来处理我们应用的路由。创建 Router 组件 (src/Router.js)：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------------- -- ------- ------ ---- - ---- ------------------
------ -------- ---- -----------------------
------ ------- ---- ----------------------
----- --------- - -- -- -
--------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------------
-----
-----
------
------ ----- -------- ------------- -- -------------- --
------ ----- ---------------- -------------------- --
------ ----- ------------------- ------------------- --
------
---------
-
------ ------- ---------这里，我们将创建路由链接，连接到产品列表和单独的产品页面，并在对应的 Route 中使用合适的组件渲染相关页面。
结论
现在，我们已经创建了一个简单的 Ecommerce 应用程序，其中 GraphCMS 用作 Headless CMS，并使用 React 用于构建我们的用户界面。通过将内容（GraphCMS）和用户界面（React）分离，我们能够更好地管理我们的代码，并更好地管理产品数据与用户界面的交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fc971444713626017055bd