在这篇文章里，我们将介绍如何使用 GraphQL 来构建一个基于博客平台的 Web 应用。我们将通过深入讨论 GraphQL 和如何使用它来优化我们的应用程序。本文将按照以下步骤进行：
- GraphQL 简介
- 构建基本的 GraphQL 服务器
- 使用 GraphQL 构建博客平台
- 完善我们的博客平台
- 结论
GraphQL 简介
GraphQL 是一种用于 API 的数据查询语言，由 Facebook 在 2012 年开发，于 2015 年开源。GraphQL 的优点是可以在单个请求中获取需要的数据。它通过这个方式来提高性能和灵活性，因为你不需要多次请求来获取数据。GraphQL 也提供了数据的强类型约束，这简化了代码的编写和维护。这些优点让 GraphQL 被广泛应用于像 Facebook 和 Github 这样的大型应用程序中。
构建基本的 GraphQL 服务器
我们首先需要构建一个基本的 GraphQL 服务器。这个服务器将支持查询博客文章，获取所有文章和获取单个文章。我们将使用 Node.js 和 Express.js 来构建 API。我们还将使用 GraphQL JS 包来实现我们的 GraphQL 服务器。
我们首先需要进行一些准备工作：
- 安装 Node.js 和 NPM
- 创建一个工作目录
- 运行
npm init
我们可以使用以下命令来安装依赖：
npm install express graphql express-graphql
我们需要创建一个服务脚本 server.js。这个脚本将初始化一个 Express 应用程序，并绑定一个 GraphQL 端点。
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------- - ---------------------------
----- -
--------------
------------------
--------------
------------
- - -------------------
----- ----- - -
- --- -- ------ --- ----- ---- ------ -------- ----- -- -- ----- ---- ------ --
- --- -- ------ --- ------ ---- ------ -------- ----- -- -- ------ ---- ------ --
- --- -- ------ --- ----- ---- ------ -------- ----- -- -- ----- ---- ------ --
--
----- -------- - --- -------------------
----- -------
------------ ----- ---------- - ---- ------
------- -- -- --
--- - ----- ------------- --
------ - ----- ------------- --
-------- - ----- ------------- --
---
---
----- ------ - --- ---------------
------ --- -------------------
----- --------
------- -- -- --
------ -
----- --- ----------------------
------------ ----- -- --- ---- -------
-------- -- -- ------
--
----- -
----- ---------
------------ --------- - ------ ---- ------
----- -
--- - ----- ------------- --
--
-------- -------- ----- -- --------------- -- ------- --- ---------
--
---
---
---
----- --- - ----------
------------------- -------------
------- -------
--------- -----
----
---------------- -- -- -
---------------------- -- ---- -------
---在代码中，我们做了以下几件事情：
- 我们定义了一个
posts数组，用于存放所有的博客文章。 - 我们定义了一个
postType类型，它代表了一篇博客文章，并包含id，title和content三个字段。 - 我们定义了一个名为
Query的对象，它包含了两个字段，posts和post。我们使用GraphQLList类型来表示一组博客文章，使用postType类型来表示单个博客文章。 - 我们创建了一个
GraphQLSchema对象，它使用Query对象作为查询接口。 - 我们创建了一个 Express 应用程序，并创建了一个
graphqlHTTP中间件来提供 GraphQL 端点。 - 最后我们启动了应用程序并监听 4000 端口。
现在，我们可以启动我们的服务器。
node server.js
现在我们可以通过 http://localhost:4000/graphql 访问 GraphQL 端点，使用 GraphiQL 控制台进行查询。我们可以使用以下查询来获取所有博客文章：
{
posts {
id
title
content
}
}我们也可以使用以下查询来获取单篇博客文章：
{
post(id: "1") {
id
title
content
}
}使用 GraphQL 构建博客平台
现在我们将使用 GraphQL 来构建一个基于博客平台的 Web 应用。我们需要一个数据库来存储博客文章信息。我们将使用 MongoDB 数据库来存储博客文章。
我们可以通过以下命令来安装依赖：
npm install mongodb dotenv
我们还需要在项目根目录下创建一个名为 .env 的文件，并添加以下内容：
DATABASE_URL=mongodb://localhost:27017/blog
我们首先需要连接到 MongoDB 数据库，并创建一个名为 posts 的集合。我们将使用以下代码来连接到 MongoDB：
-- -------------------- ---- -------
----- ----------- - -------------------------------
----- ------ - ------------------
----------------
----- --- - -------------------------
--- ---
------------------------ -
---------------- -----
------------------- -----
-- ----- ------- -- -
-- ----- -
-----------------
-------
-
-- - ------------------
---------------------- -- -----------
---接下来我们需要添加一个 Post 类，它代表了一篇博客文章。我们可以使用以下代码构建一个 Post 类。
-- -------------------- ---- -------
----- - --- ------ - - ----------------
----- ---- -
------------------ -------- -
------- - ---------
---------- - ------
------------ - --------
-
-现在我们需要更新我们的 GraphQL 服务器以从 MongoDB 获取博客文章。我们首先需要安装 mongoose 包来访问 MongoDB 数据库。我们可以使用以下命令来安装依赖：
npm install mongoose
我们将使用以下代码来更新我们的服务器。
-- -------------------- ---- -------
----- -------- - --------------------
-- ------- -- -------
--------------------- -
---------------- -----
------------------- -----
---
----- -- - --------------------
-------------- --------------------------- ----------- ----------
--------------- -- -- -
---------------------- -- -----------
---
-- ------ ---- ------
----- ---------- - --- -----------------
------ -------
-------- -------
---
-- ------ ---- -----
----- --------- - ---------------------- ------------
-- ------ ------- ---- --- ----
----- -------- - --- -------------------
----- -------
------------ ----- ---------- - ---- ------
------- -- -- --
--- - ----- ------------- --
------ - ----- ------------- --
-------- - ----- ------------- --
---
---
-- ------ ------- -----
----- ------ - --- ---------------
------ --- -------------------
----- --------
------- -- -- --
------ -
----- --- ----------------------
------------ ----- -- --- ---- -------
-------- ----- -- -- -
----- ----- - ----- -----------------
------ ------
--
--
----- -
----- ---------
------------ --------- - ------ ---- ------
----- -
--- - ----- ------------- --
--
-------- ----- -------- ----- -- -
----- ---- - ----- ----------------------------
------ -----
--
--
---
---
---
-- ------ ------- --------
----- ------------ - --- -------------------
----- -----------
------- -- -- --
----------- -
----- ---------
----- -
------ - ----- ------------- --
-------- - ----- ------------- --
--
-------- ----- -------- ----- -- -
----- ---- - --- ----------------
----- ------------
------ -----
--
--
----------- -
----- ---------
----- -
--- - ----- ------------- --
------ - ----- ------------- --
-------- - ----- ------------- --
--
-------- ----- -------- ----- -- -
----- ---- - ----- ------------------------------------ ----- - ---- ---- ---
------ -----
--
--
----------- -
----- ---------
----- -
--- - ----- ------------- --
--
-------- ----- -------- ----- -- -
----- ---- - ----- -------------------------------------
------ -----
--
--
---
---
-- --- -------- -- ------
--------------- - -------------
----- --- - ----------
----------------
------------------- -------------
------- -------
--------- -----
----
---------------- -- -- -
---------------------- -- ---- -------
---我们做了以下几件事情：
- 我们创建了一个
Post模型，它将映射到 MongoDB 中的posts集合。我们还定义了一个postSchema，它代表了博客文章的模式。 - 在查询字段上，我们通过异步方法从
PostModel中获取文章。 - 我们添加了三个
Mutation，用于创建、更新和删除博客文章。 - 我们将
Mutation添加到GraphQLSchema对象中，以便其他查询可以调用它。
现在我们可以使用 GraphQL 控制台来测试我们的 API，并创建、更新和删除博客文章。示例代码如下：
-- -------------------- ---- -------
-------- -
----------------- --- ----- ---- ------ -------- ----- -- -- ----- ---- ------- -
--
-----
-------
-
-
-------- -
-------------- ---- ------ --- ------- ---- ------ -------- ----- -- -- ------- ---- ------- -
--
-----
-------
-
-
-------- -
-------------- ---- -
--
-----
-------
-
-完善我们的博客平台
我们可以使用 React 来构建我们的博客平台。我们需要使用 react-router-dom 和 graphql-request 包来访问 GraphQL 服务。我们可以使用以下命令来安装依赖：
npm install react-router-dom graphql-request
我们还需要创建一个 .env.local 文件，用于指定 GraphQL 端点 URL。我们可以使用以下命令来创建：
touch .env.local
然后将以下配置写入文件中：
REACT_APP_GRAPHQL_HTTP=http://localhost:4000/graphql
我们将使用 React 来创建一个组件来首页，它将获取所有的博客文章，并将它们渲染到页面中。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ---- - ---- -------------------
------ - ------- - ---- ------------------
----- ------- - -----------------------------------
----- -------- - -- -- -
----- ------- --------- - -------------
------------ -- -
----- ---------- - ----- -- -- -
----- ----- - --
----- -
--
-----
-------
-
---
----- ---- - ----- ---------------- -------
---------------------
--
-------------
-- ----
------ -
-----
------ ---------
----
----------------- -- -
--- --------------
----- ------------------------
---------------------
-------
---------------------
-----
---
-----
------
--
--
------ ------- ---------我们也可以创建一个 PostPage 组件，用于显示单个博客文章。示例代码如下：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - --------- - ---- -------------------
------ - ------- - ---- ------------------
----- ------- - -----------------------------------
----- -------- - -- -- -
----- - -- - - ------------
----- ------ -------- - -------------
------------ -- -
----- --------- - ----- -- -- -
----- ----- - --
-------- -------- -
--
-----
-------
-
---
----- ---- - ----- ---------------- -------
-------------------
--
------------
-- ------
------ -
-----
---------------------
---------------------
------
--
--
------ ------- ---------最后，我们需要将这些组件放入一个 BrowserRouter 中，以便路由到不同的页面。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- ------ ------ - ---- -------------------
------ -------- ---- -------------
------ -------- ---- -------------
----- --- - -- -- -
------ -
---------------
--------
------ ----- -------- -------------------- --
------ ---------------- -------------------- --
---------
----------------
--
--
------ ------- ----现在我们可以使用以下命令来启动我们的 React 应用程序：
npm start
现在我们可以通过浏览器访问我们的博客平台并添加、更新、删除博客文章。
结论
在本文中，我们介绍了如何使用 GraphQL 和 MongoDB 来构建一个基于博客的 Web 应用程序。我们首先学习了 GraphQL 的优点和用途，然后使用 Express 和 MongoDB 创建了一个基本的 GraphQL 服务器。然后我们使用 Mongoose 包来连接 MongoDB 数据库，并将其集成到我们的 GraphQL 服务器中。最后，我们使用 React 来构建一个简单的博客平台，并将其集成到 GraphQL API 中。
本文中的示例代码可在 GitHub 上访问。如果您要构建自己的 GraphQL 应用程序，请务必查看示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671074de5f551281026b3577