useInfinite Query and observationObserver sample hook.

[crowd-dong]

Hey maintainers. Having an issue with useInifiniteQuery and the observationObserver Hook
I have been using sample useIntersectionObserver hook that is provided with the example of infinite scrolling.

The hook is being imported and used into a ListComponent

const myList = ({myDataFromUseInfiniteQuery, hasNextPage})) => {
      const myref = useRef()
      useIntersectionObserver({target: myRef, onIntersect, enabled: hasNextPage, threshold})
    
      return(
        myDataFromUseInfiniteQuery.map((data) => 
          <ul>
             <li>sometitems</li>
              {.......}
              <SomeComponentToWatch ref={myref} hasNextPage={hasNextPage} />
          </ul>)))
}

The issue I have having is that I am only able to load 2 page of data and it stops triggering the onIntersect callback after the 2nd load. My observation is that it is only happening because the target dom element is automatically in the viewport.

I guess you can kinda see the effect here at the sample code for useInfiniteQuery from react-query sample. You would have to zoom out to maybe 30%.

What i found is that once I remove target.current and enabled param from the useObservationObserver useEffect. The observationObserver does not have this sort of hangup and the useObservationObserver does continue on and load more data as long as it is in the viewport.

useObservationObserver = () => {
 ....
 useEffect(() => {
   .....
 })

Maybe this is not an issue with react-query and maybe more with react and useEffect?
I am sorry if this is the wrong place to ask and please excuse me.

[TkDodo]

In the code you posted above it looks like you are rendering the element that has the ref attached within the loop, which means you’ll render it more than once. Make sure you render the ref of the observer only once, after the list.

[crowd-dong]

Thank @TkDodo for the quick response my aplogies there was an error with the return block

  return (
    <>
      <ul className="list">
        {React.Children.toArray(
          myData.map(data => {
            return (
              <DataItem
                item={data}
                {...other}
              />
            );
          }),
        )}
      </ul>
      <SomeComponentToWatch ref={myref} hasNextPage={hasNextPage} />
    </>

Maybe this is a better example. I did take your advice and move it outside of the loop, but even still i still have the non loading behavior.
🙇

[TkDodo]

I have been using this intersection observer hook successfully with react-query: https://github.com/thebuilder/react-intersection-observer

[crowd-dong]

@TkDodo Thank you, ill give it a shot. 🙇

[minhluudinh]

Hi, I have just encountered the same issue. The reason is that the component that is being watched shouldn't be visible if data is undefined or when React Query isFetchingNextPage. You can try hiding the component when React Query is fetching for the first time or is fetching next page. Hope it help.