React 和 GraphQL 是一对非常火热的技术，用于构建现代化的 Web 应用程序，可以通过简单的、可复用的组件进行快速开发和部署。本文将介绍如何使用 React 和 GraphQL 来构建实时记录列表，从而创造一个可扩展且易于维护的应用程序。
为什么选择 React 和 GraphQL？
React 是一个用于构建用户界面的 JavaScript 库，它将 UI 分解为可重用的组件，并提供了丰富的生态系统和开发工具。 React 引入了虚拟 DOM，使得它非常快速、高效，并且易于理解。它还允许开发者以声明式方式描述界面，使得代码更加可读性强。
GraphQL 是一种用于 API 开发的查询语言和运行时，它提供了一个强大的工具来管理应用程序数据。GraphQL 允许客户端指定其需要的数据，并允许服务端只返回客户端所需的数据，这使得网络请求更加高效。它还提供了强大的查询和类型系统，使得 API 变得明确和易于维护。
React 和 GraphQL 的组合提供了极大的优势，包括：
- 前后端代码分离，降低了开发复杂性
- 灵活的数据查询和管理
- 请求合并和批处理，提高网络效率
- 可重用的组件和模块，提高开发效率
构建实时记录列表
本篇文章将演示如何使用 React 和 GraphQL 构建实时记录列表。该应用程序将使用以下技术：
准备工作
在开始编写代码之前，您需要做一些准备工作。首先，您需要确保安装了 Node.js 和 MongoDB。同时，您需要安装以下依赖项：
$ npm install apollo-boost react-apollo graphql-tag graphql yoga @babel/core @babel/preset-env babel-loader webpack webpack-cli webpack-dev-server
创建 GraphQL Schema
我们需要先创建一个 GraphQL Schema，定义我们的数据模型。在本文中，我们将用户和记录两个数据模型作为例子。该 Schema 的定义如下：
-- -------------------- ---- ------- ---- ----- - ------ -------- -------- ----- ---- -------- ---------- - ---- -------- - ---------------- -------- ------ --------- ----- -------------------- ---- ------ -------- -------- --------- ------- - ---- ------------ - ------------ ------- - ---- ---- - --- --- ----- ------- ------ ------- -------- ---------- - ---- ------ - --- --- ------- --- ------ ------- -------- ------- ----- ----- -展开代码
该 Schema 定义了查询（Query）、变更（Mutation）和订阅（Subscription）三个顶级操作类型，分别对应读取数据、修改数据和实时更新数据的场景。
创建 GraphQL 服务器
接下来，我们需要创建一个 GraphQL 服务器来实现 Schema，并提供对应的操作。在本文中，我们将使用 GraphQL-Yoga 实现该服务器。
以下是服务器的初始化和配置：
-- -------------------- ---- ------- ----- - -------------- ------ - - ----------------------- ----- -------- - ------------------- ----- ------ - --- -------- --------------------------------------------- - ---------------- ---- -- ----- ------ - ------------------------ - ------- ------- ------ ------- -------- ------- -- ----- ---- - ---------------------- - ----- ------- ------ ------- -------- -- ----- ------------------------------- ---- -------- --- -- ----- --------- - - ------ - ------ -- -- ------------ ----- --- - -- -- -- ------------------ -------- -- -- -------------- -- --------- - ----------- ----- --- - ----- ----- -- -- - ----- ---- - --- ------ ----- ----- -- ----- ----------- ------ ---- -- ------------- ----- --- - ------- ------ ------- -- -- - ----- ------ - --- -------- ------- ------ ------- -- ----- ------------- ----- ---- - ----- --------------------- ------------------------- ----- ----------- ----------------------------- - ------------ ------ -- ------ ------ -- -- ------------- - ------------ - ---------- -- -- ------------------------------------ -- -- ----- - -------- -- -- -- -- ------------- ------- -- --- -- ------- - ----- -- ------ -- -- ---------------------- -- - ----- ------ - --- --------------- --------- ----------------------- ---------- -- --------------- -- ------------------- -- ------- -- ------------------------展开代码
我们使用了三个库：GraphQL-Yoga、mongoose 和 PubSub。GraphQL-Yoga 用于构建服务器，mongoose 用于与 MongoDB 进行数据交互，而 PubSub 用于实现订阅功能。我们创建了两个数据模型：User 和 Record，并编写了 Query、Mutation、Subscription 的实现。
创建前端应用程序
现在，我们可以开始构建前端应用程序了。在本文中，我们将使用 React 和 Apollo-Client 来实现该应用程序。
安装 Apollo-Client
首先，我们需要安装 Apollo-Client 和相关依赖项：
$ npm install apollo-boost react-apollo graphql-tag
创建 Apollo-Client
我们需要创建一个 Apollo-Client，用于连接到 GraphQL 服务器。以下是代码：
-- -------------------- ---- ------- ------ - ------------ - ---- --------------- ------ - -------------- - ---- -------------- ------ - ------------- - ---- ----------------------- ------ - -------- - ---- ------------------ ----- ------ - --- -------------- ------ --- ---------------- ----- --- ---------- ---- ----------------------- --- --展开代码
我们配置了一个 apollo-client 与可重用的 HttpLink。我们将使用 HttpLink 来访问 GraphQL 服务器，并将其与 InMemoryCache 合并。这将为我们提供高效的缓存和查询性能。
创建记录列表
我们需要创建一个组件来显示记录列表。以下是代码：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - --- - ---- -------------- ------ - ----- - ---- -------------- ----- ----------- - ---- ----- - ------- - -- ----- ------- ---- - -- ---- - - - - ----- ---------- - -- -- - ------ -------------------- --- -------- ------ ---- -- -- - -- --------- ------ ----------------- -- ------- ------ --------- ------------------- ------ - ----- ---------- --------- ---- -------------------- --- ------ -------- ---- -- -- - --- --------- ---------------- ----------- ------------- ---------- --------------- ----- --- ----- ------ - -- -------- - ------ ------- ----------展开代码
我们使用 react-apollo 中的 Query 组件执行我们的 GraphQL 查询。在这里，我们检索所有的记录，并将其作为记录列表进行渲染。在读取时，我们还捕获了加载和错误状态，以便在加载期间为用户提供反馈和错误消息。
创建表单
我们需要创建一个表单组件，以便用户添加记录。以下是代码：
-- -------------------- ---- ------- ------ ------ - -------- - ---- ------- ------ - --- - ---- -------------- ------ - -------- - ---- -------------- ------ - ----------- - ---- -------------- ----- ------------- - ---- -------- --------------------- ---- ------- -------- --------- -------- - -------------------- -------- ------ ------- -------- --------- - -- - - - ----- ---------- - -- ----- -- -- - ----- -------- ---------- - --------------------- ----- ------- --------- - ------------ ----- --------- ----------- - ------------ ----- ------------ - --- ------------- -- - ------------------ -------------- ---------- - ------- ------ ------- - -- ------------ -------------- - ------ - --------- ------------------------ --------------- - ----- - ------------ - -- -- - ----- - ------- - - ----------------- ------ ----------- -- ------------------ ------ ------------ ----- - -------- ------------------------------ -- -- -- - --------------- - ---- -- -- - ----- ----------- -- --------------- --------------- ----- ------ ------------------------------ ------- ----------- ------------- -------------- ----------- -- -------------------------- - --------------- -- - ------- ------------- ---------------- ----------- --------- --- --------- ------ ----- ------ ------------------------------ ------ ----------- ------------ ------------- ----------- -- ------------------------- -- ------ ----- ------ ---------------------------------- --------- -------------- --------------- ----------- -- --------------------------- -- ------ ------- ----------------------------- ------- -- ----------- - - ------ ------- ----------展开代码
我们使用 Mutation 组件来处理提交数据，并在提交后更新我们的缓存。在这里，我们还显示了一个表单，以便用户输入记录的信息。一旦表单被提交，它将调用后端数据模型的 createRecord 方法，并在成功后向客户端发送添加记录的消息。
订阅实时流
我们还想实现一个实时流，以便向客户端推送新添加的记录。以下是代码：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - --- - ---- -------------- ------ - ------------ - ---- -------------- ------ - ----------- - ---- -------------- ----- ------------ - ---- ------------ - ----------- - -- ----- ------- ---- - -- ---- - - - - ----- ------------ - -- -- - ------------- ---------------------------- --- ---- -- -- - ----- ------------ --------- ---- ----- -- ---------------- -- - --- -------------------------- --------------------------------- ----------- ------------------------------ ---------- -------------------------------- ----- -- ----- ------ -- --------------- - ------ ------- ------------展开代码
我们使用 Subscription 组件来订阅添加新记录的操作。在这里，我们将执行新记录的查询，并将其作为实时流进行渲染，并在添加新记录时触发更新操作。在应用程序中使用这个组件将让用户得到实时更新的记录列表。
最终效果
在完成这些步骤后，我们可以启动应用，开始构建我们的应用程序。以下是最终效果的屏幕截图：
该应用程序非常简单，但它展示了如何使用 React 和 GraphQL 来构建实时记录列表。我们在前端使用了 React 和 Apollo-Client，后端使用了 GraphQL-Yoga 和 MongoDB。使用这些工具，我们可以轻松地管理应用程序的数据，从而提供更具可扩展性的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c436b46e1fc40e36d1ab65
