多组件多用查询 Apollo 客户端答案

【问题标题】：Multiple components with multiple useQuery Apollo client多组件多用查询 Apollo 客户端
【发布时间】：2021-03-20 20:42:49
【问题描述】：

我有一个数据可视化页面，其中有很多图表、地图等来可视化数据。我通过让每个可视化都有自己的独立组件来解决这个问题。所以现在我有大约 20 个组件都在执行 useQuery，这会因为负担而减慢加载时间。

但是，许多可视化不在视口中，因此会减慢那些可视化的执行速度。所以那些显示的加载数据的时间比预期的要长。

我一直在寻找一种方法，让位于视口中的那些首先加载，并且仅在您向下滚动时加载。这看起来很有希望，但我想知道这是否是正确的方法，或者是否有一种更简单的方法可以在页面顶部的组件中优先考虑 Apollo 查询。

我一直在寻找其他有此问题的人，但我没有看到太多，而且 Apollo 文档并没有真正解决这个问题，因为他们往往围绕一个组件运行一两个查询。

【问题讨论】：

【解决方案1】：

看看this repo。

使用 useQuery 中的跳过 option 以不获取，除非在视口中。

可能为每个图形组件和一些占位符图像设置默认宽度/高度。

【讨论】：

谢谢，我偶然发现：react-intersection-observe。两种解决方案都采用相同的方法，即在视口中之前不渲染。它运作良好，我想这是解决此问题的唯一（最佳）方法。