React- Apollo Client- 结构化组件

Posted 2023-03-10

【中文标题】React- Apollo Client- 结构化组件

【英文标题】：React- Apollo Client- structuring components

【发布时间】：2019-02-08 19:58:58

【问题描述】：

假设组件 - TodoList 需要以两种不同的方式显示 TODO 的列表，listview 和 gridview 。页面上有一个切换视图的开关。假设我想将 2 个视图保留为不同的组件，最佳做法是什么 -

使用graphql 查询创建TodoList 组件，然后将查询结果传递给TODOListView 和TODOGridView 组件？

用 NO graphql 查询创建 TodoList 组件，然后在 TODOListView 和 TODOGridView 组件中写入相同的 grqphql 查询（不是 DRY，每个组件中查询重复，但 apollo 缓存会确保它不会被多次调用）？

每种方法的好/坏？

【参考方案1】：

恕我直言没有真正的选择，缓存使用没有价值作为论据，那么第二种方法没有好的部分。

考虑到可用性、用户体验、以用户为中心的设计，您可能希望在切换视图类型时保持页面、排序和过滤状态。作为用户，您期待这种行为。只有第一个解决方案才能轻松实现这一点。

假设我想将 2 个视图保留为不同的组件

恕我直言，这也是错误的假设。当然你可以这样做，但列表几乎相同，真正的区别在于项目/行渲染。 如果这是一个简单的样式集更改（或添加一些元素），那么甚至不需要为项目使用组件，只需条件渲染即可。您可以稍后更改/重构它。

利用项目组件，您可以获得额外的抽象层和更复杂的用例。通过向下传递（进入项目）切换类型处理程序，我能够从单一项目级别（全局）更改它或更改本地项目视图类型 - 混合元素列表。

【讨论】：

完全同意您的建议。我的问题也与当 graphql 出现时它是如何完成的有关。在这些组件中编写 gql 的最佳实践是什么..

我在第一句话中死记硬背这个（缓存）；）

它同样适用于 graphql、redux 或其他集中式（缓存或非缓存）数据源。 DRY 和未来更容易管理的胜利。