使用React / GraphQL为每个视图/表单/报表应用程序提供最简单的URL路由的最佳设置

时间:2016-07-12 01:03:15

标签: reactjs graphql

我正在计划一个简单的CRUD /报告应用程序,它具有以下特征:

  • 第一次加载数据后无需动态更新页面
  • 每页/表单/报告/不同的URL路由(例如,不需要弹出表单,一旦提交就会更新页面)
  • 无需乐观更新
  • 不需要数据缓存客户端

我在这里想要实现的是彻底消除客户端与服务器通信的编程。为了实现它,我想使用以下堆栈:

  • PostgreSQL及其角色系统,用于管理多用户应用程序中的身份验证
  • Postgraphql作为客户端与数据库通信的单一API端点
  • GraphQL语言,用于在呈现特定URL路由之前立即获取所有数据
  • 在单页应用程序中管理URL路由的React Route

我想避免的事情:

  • 使用Relay
  • 为这样一个简单的应用程序使用Relay进行过度工程

应用程序更多的是关于各种报告和输入表单的数量而不是它们的复杂性。

所以这里的目标是尽可能快地组合表单和报告,并声明它需要/声明哪些数据,因此除了在客户端声明数据之外,服务器端没有任何冗余编码。

对于这个应用程序,在以下情况下重新加载整个页面是绝对可以的:

  • 提交表单
  • 在报告中进行分页,过滤或排序更改

换句话说,我正在研究一种制作类似经典PHP的CRUD应用程序的方法,但仅使用客户端JS。

我希望所有这一切都可以使用React来轻松构建UI,Redux(如果页面只是重新加载,我需要它吗?),React Route来管理URL路由,GraphQL作为一种从中查询数据库的方法客户端无需使用GraphQL的高级功能(片段,缓存,乐观更新等)。

为清楚起见,大多数业务逻辑都在报表(复杂的SQL查询)中,而不是在GUI中。

我也看过代码生成器,但我不想把自己锁定在一个代码生成器中。我也看过Postgres Forms项目,但它似乎没有被积极开发和支持了。

1 个答案:

答案 0 :(得分:0)

如果您的目标是以非常简单的方式将GraphQL数据添加到您的UI,我会尝试apollo-clientreact-apollo(免责声明:我是此软件包的主要作者) 。您使用React高阶组件将查询附加到组件,并通过props获取并传递给组件。

您不需要设置任何构建过程或工具来使用它,它根本不会与React Router冲突。

最简单的事情可能只是看看这个全栈示例应用程序,它具有您提到的所有功能 - 简单的数据获取和编辑:https://github.com/apollostack/GitHunt(只需查看ui文件夹对于某些组件)

完整的文档在这里:

  1. 如何安装/初始化:http://docs.apollostack.com/apollo-client/index.html
  2. 如何使用React:http://docs.apollostack.com/apollo-client/react.html#connect