[React][useInfiniteQuery] 如何限制第一次获取调用仅在视图在视口中可见时发生

Question

我在我的组件中使用 useInfiniteQuery 挂钩无限滚动项目。 我希望第一次提取仅在视图在视口中可见时发生。 我正在使用 useInView/intersection observer 来查找视图在视口中是否可见。

我正在使用 useInView/intersection observer 来查找视图在视口中是否可见，但无法以此为基础限制第一次获取。

Answer 1

我假设您正在谈论来自@tanstack/react-query的useInfiniteQuery挂钩。 这个钩子实际上继承了useQuery的所有选项，它带有一个enabled属性，它决定了它何时被触发。 假设您有一个 boolean 确定您的IntersectionObserver的 state，您可以这样做：

useInfiniteQuery('data', fetchData, {
    enabled: valueFromIntersectionObserver
});

有关详细信息，请参阅useQuery挂钩的文档。