使用 GraphQL、React 和 Express 构建现代全栈应用

Source: Dev.to

为什么选择 GraphQL、React 和 Express

构建使用 GraphQL、React 和 Express 的全栈应用具有多项实际优势：

• 高效的数据获取 – 与传统的 REST API 往往返回超出需求的数据不同，GraphQL 让客户端只请求所需的字段，从而实现更快的加载时间和更流畅的用户体验。
• 组件化 UI – React 的组件化架构促进代码复用，加速开发，并简化维护。其丰富的生态系统提供了大量工具和库，可用于扩展功能。
• 轻量级服务器框架 – Express 是一个极简的 Node.js 框架，简化了 API 与服务器端逻辑的开发。随着应用规模的扩大，它依然保持高效且灵活。
• 无缝集成 – GraphQL 充当 React 前端与 Express 后端之间的桥梁，实现可预测的数据流，降低错误率，加快产品投放市场的速度。
• 实时能力 – GraphQL 订阅支持聊天消息或通知等实时更新，使应用保持响应性和互动性。
• 可扩展性 – 高效的查询、可复用的 UI 组件以及坚实的后端基础相结合，使得在业务需求演进时更容易对应用进行扩展。

构建应用程序

1. 设置后端（Node.js + Express）

1. 初始化 Node.js 项目

   npm init -y
   npm install express

2. 创建 Express 服务器（例如 server.js）

   const express = require('express');
   const app = express();
   const PORT = process.env.PORT || 4000;
   
   app.use(express.json());
   
   // 示例路由
   app.post('/login', (req, res) => {
     // 处理登录
   });
   
   app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

3. 连接数据库 – 选择 MongoDB、PostgreSQL 或其他数据存储，并使用相应的驱动或 ORM 配置连接。

4. 添加 GraphQL

   npm install graphql express-graphql

   定义模式（schema）和解析器（resolvers），使其映射到你的数据模型，然后挂载 GraphQL 中间件：

   const { graphqlHTTP } = require('express-graphql');
   const schema = require('./schema');
   
   app.use('/graphql', graphqlHTTP({
     schema,
     graphiql: true, // 为开发启用 GraphiQL UI
   }));

2. 设置前端（React）

1. 创建 React 项目

   npx create-react-app client
   cd client

2. 安装 Apollo Client 以进行 GraphQL 通信：

   npm install @apollo/client graphql

3. 配置 Apollo Provider（例如在 src/index.js 中）：

   import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
   import App from './App';
   
   const client = new ApolloClient({
     uri: 'http://localhost:4000/graphql',
     cache: new InMemoryCache(),
   });
   
   ReactDOM.render(
     
       
     ,
     document.getElementById('root')
   );

4. 构建可复用组件 – 将 UI 拆分为 Header、Sidebar、ContentList 等组件，并在页面中进行组合。

5. 使用 GraphQL 查询获取数据 – 使用 Apollo 的 useQuery Hook 来检索数据：

   import { useQuery, gql } from '@apollo/client';
   
   const GET_USERS = gql`
     query GetUsers {
       users {
         id
         name
         email
       }
     }
   `;
   
   function UserList() {
     const { loading, error, data } = useQuery(GET_USERS);
     // 根据查询状态渲染 UI
   }

3. 前后端连接

• 模式对齐 – 确保服务器上的 GraphQL 模式与 React 组件所需的数据结构保持一致。
• 解析器 – 实现服务器端解析器，从数据库获取数据并以模式定义的形状返回。
• 变更（Mutations） – 为创建、更新或删除记录编写 GraphQL 变更，并在前端使用 Apollo 的 useMutation Hook 调用。
• 订阅（可选） – 在服务器上设置 GraphQL 订阅（例如使用 graphql-ws 或 subscriptions-transport-ws），并在客户端订阅以接收实时更新。

4. 测试与部署

1. 自动化测试 – 使用 Jest 和 React Testing Library 进行前端测试，使用 Mocha 或 Jest 进行后端单元/集成测试。
2. 持续集成 – 配置 CI 流水线，在每次推送时运行测试。
3. 部署 – 将后端部署到云平台（Heroku、AWS Elastic Beanstalk、Render 等），将 React 应用部署到静态托管服务（Netlify、Vercel、AWS S3/CloudFront）。
4. 环境变量 – 使用平台特定的配置安全存储密钥（如数据库凭证、API 密钥）。
5. 监控 – 设置日志和性能监控（例如使用 Winston、Prometheus，或第三方服务如 New Relic）。

5. 维护与扩展

• 依赖更新 – 定期更新 npm 包并应用安全补丁。
• 性能优化 – 实施缓存策略（如 Apollo 缓存、Redis）并在 GraphQL 服务器上进行查询优化。
• 负载处理 – 对后端进行水平或垂直扩容，以应对增长的请求量。
• 错误处理 – 在前后端统一实现错误捕获和友好提示。
• 文档 – 使用工具（如 Swagger、GraphQL Playground）维护 API 文档，确保团队成员能够快速上手。

水平扩展（在负载均衡器后面运行多个 Node.js 实例）并使用能够处理增加流量的托管数据库服务。

• 用户反馈循环 – 收集分析数据和用户反馈，以指导迭代改进。

Conclusion

选择 GraphQL、React 和 Express 来构建现代全栈应用程序，可提供速度、灵活性和可扩展性，并得到充满活力的生态系统的支持。通过遵循以下步骤——搭建轻量级的 Express 服务器、定义 GraphQL 架构、构建基于组件的 React UI，并使用 Apollo 将它们集成——您可以交付一个性能出色、实时的数字产品，并随业务需求的增长而扩展。