渐进式获取或一次全部获取主详细信息答案

【问题标题】：Progressive fetch or all at once Master Detail渐进式获取或一次全部获取主详细信息
【发布时间】：2020-01-30 19:22:46
【问题描述】：

我正在使用 React 和 GraphQL 制作一个主从细节的应用程序。让我解释一下，有一个显示产品的侧边栏，然后当您单击其中一个产品列表时，主窗口中会显示另一个列表（主详细信息）。这是踢球者，如果您单击主窗口中的一个产品，右侧边栏上的另一个部分将填充详细信息。像这样：

主列表 --> 详细列表 --> 详细属性

我已经很好地设置了 React Router，想知道什么是正确的获取方法？对此有很多想法。例如，我是否应该构建 GraphQL 的调用和数据以仅获取所有 onLoad？即父母（产品）、孩子（产品列表）和详细信息（孩子的详细信息。只需获取所有内容并设置状态？

或者，是使用 GraphQL 做事的正确方法，在应用程序加载时仅加载产品列表，当用户点击产品时，然后获取子产品列表，当他们点击子产品时，然后获取详细信息。

只是想知道方法....当然，当列表变大时，我想您会在主窗格中显示微调器，然后在详细信息窗格中显示微调器。

GraphQL 解决了 overFetching 的情况....但是，我应该在用户点击时将 fetch 分开并逐步提取...还是一次提取所有内容，然后单击 -> map() 覆盖结果。

我很想听听大家对此的看法。

【问题讨论】：

这是一个很好的问题，但并不真正适合 SO，因为它可能只生成基于意见的答案。您可以考虑将此问题提交给更多不同的社区（例如，reddit）
尊敬的，我不得不不同意它的适用性。这是一个关于分解 GraphQL 请求与一次性获取所有请求的简单编码问题。
点虽然。我需要更好地了解 GraphQL 的使用。

标签： javascript reactjs rest react-router graphql

【解决方案1】：

这里的答案是不要一次获取整个 JSON 树。那将是一个巨大的过度获取。我们可以在 MongoDB 中以一对多的关系为父项和子项创建单独的集合，然后使用 GraphQL 在每个窗口 onClick/onChange 中准确获取我们需要的内容。这似乎是最有效和最方便的方式，因为我正在处理超过 10 个数据窗格和大约 50 个组件。这是我正在开发的一个非常复杂的应用程序。

【讨论】：

FWIW，您还可以查看prefetching，作为在保持初始负载最小的同时改善用户体验的方法。