How to restrict the first fetch call to happen only when the view is visible in the viewport

Question

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.

Answer 1

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.