I am using useInfiniteQuery hook for infinite scrolling items in my component. I want that the first fetch happens only when the view is visible in the viewport . I am using useInView/intersection observer for finding if the view is visible in viewport.
I am using useInView/intersection observer for finding if the view is visible in viewport, but unable to restrict the first fetch on the basis of this.
I'm assuming you are talking about the useInfiniteQuery hook from @tanstack/react-query. This hook actually inherits all options from useQuery, which takes an enabled property, that determines when it will be triggered.
Assuming you have a boolean that determines the state of your IntersectionObserver, you could do something like this:
useInfiniteQuery('data', fetchData, {
enabled: valueFromIntersectionObserver
});
Refer to the documentation of the useQuery hook for more details.
