具有多个 useQuery Apollo 客户端的多个组件

Multiple components with multiple useQuery Apollo client

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

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

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

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

查看 this 存储库。

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

可能为每个图形组件和一些占位符图像设置默认值 width/height。