GraphQL

搭配玩法

4

GraphQL +

React + 微信小程序+ Taro+ Taro-ui

用 Taro + Taro-ui + GraphQL 以 React 语法开发微信小程序端

Taro 让作者用 JSX 语法写小程序，GraphQL 与其他端保持一致的技术栈；但 mp 私货多、devtools bug 多，被列为五端中最难

✓ JSX 语法复用前端经验✓ custom-tab-bar 方案较优 ✕ devtools bug 多需重启✕ Taro 新功能文档缺失

完整方案出处

GraphQL +

Next.js+

React + MySQL+ Docker Compose+ @nestjsx/crud+ Nest.js+ Ant Design+ MobX

基于 Yarn workspaces monorepo 的前后端一体 CMS：Nest.js API + React/Antd 管理后台

Nest.js 提供范式与 TS 支持，@nestjsx/crud 快速搭 CRUD API，React+Antd+MobX 构建管理后台，monorepo 共享类型与配置

✓ 一仓库共享 interface 与可复用✓ 最小可用 Dashboard 模块齐全可 ✕ monorepo 文件多易被干扰✕ 安装慢 CPU 占用高

完整方案出处

GraphQL +

React+

React Native+

Jest + TypeScript+ Yarn Workspaces+ Babel 7+ Relay Modern

用 Lerna 管理单仓库，一套 GraphQL + Relay 同时服务 Web 与 App 端

Relay 统一前后端数据层，React 与 React Native 共享业务逻辑，Lerna 统一管理多包

✓ 前后端同仓开发联调快✓ Web/App 共享 Relay 数据层 ✕ Relay 编译步骤额外增加✕ 需要阅读 React Native 官方

完整方案出处

GraphQL +

MongoDB + Node 14++ Apollo+ Blueprint+ X-Framework

基于 X-Framework 与 Blueprint 快速生成含 GraphQL API 与管理后台的全栈应用

Blueprint 基于 X-Framework 做快速原型，API 依赖 Apollo/GraphQL，数据层用 MongoDB，CLI 生成代码后分别启动 API 与管理端。

✓ 快速原型生成✓ 依赖注入模块化 ✕ 原型方案绑定 MongoDB