useInfiniteQuery not working properly after removing version 3.0.1

Describe the bug After I was forced to downgrade from v3.0.1 to v2.23.0, because the v3.0.1 was completely deleted from its existence, the useInfiniteQuery is not working properly anymore.

Few issues happening

• It’s fetching the API twice for each page when I scroll to bottom
• Sometimes it doesn’t even call the API to fetch data when I scroll to bottom
• The refetch function is sending a null page if the previous page has been already fetched, for example, if I scroll to bottom and fetch the next page (it’ll fetch it twice for some reason) then when I call refetch it’s sending once with the correct page number and another time with value null (I assume because of some caching issue cause previously it called the. API twice with that page number) .

To Reproduce Steps to reproduce the behavior:

• I don’t know how to reproduce this outside of my app but I am pretty sure if you guys test this and use for your own app you will see the exact same problems

Expected behavior

• When I scroll to bottom I expect to fetch the next page data only once
• Detect scroll to bottom always and fetch only if there is more data to fetch
• When calling refetch it should fetch all previous data called (with all pages)

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS Catalina
• Browser: Chrome

Additional context Please bring back version v3.0.1 because my app now is not working or else check what have you guys missed from v3.0.1 in v2.23.0.

Part of my code I can see the initial data loaded but when scrolling to bottom then all the issues are coming up.

const Component = () => {

const {
    data,
    isFetchingMore,
    isFetching,
    fetchMore,
    canFetchMore,
    refetch,
  } = useInfiniteQuery(
    'fetch-data',
    async (key, page: number | null = 1) =>
      getData(id, page, filter),
    {
      getFetchMore: (latestFetch) => latestFetch.nextPage
    }
  )

  useIntersectionObserver({
    target: loadMoreRef,
    onIntersect: fetchMore,
    enabled: canFetchMore,
  })

useEffect(() => {
      refetch()
  }, [filter])

return (
    <div className="list">
      {data && data.map((page) =>
              page.data.length > 0 ? (
                page.data.map((user: Account) => (
                  <Item> {user.name} </Item>
                ))
              ) : (
                  <div> no user found </div>
              )
            )}
          {canFetchMore && (
            <div ref={loadMoreRef}>
              {isFetchingMore && <LoadingSpinner  />}
            </div>
          )}
      }
     </div>
  )
}

[kennedy0527]

@boschni yup, I also figured that out, not sure what is the problem exactly cause I only followed the example based on the documentation provided.

In v2.23.0 the scroll sometimes was working but then I had an issue where the API was being called twice. In v2.5.0 I don’t have that problem, in fact I don’t have any problem. I didn’t change the code I just downgraded the RQ version, so I also cannot say that the problem is in my code.

Anyway, it’s ok, for now I will use v2.5.0. However, I will keep testing with the new versions that will be released and see if the issue still persists or not.

Thanks you

useRef will not notify you when it’s content changes, simply change to callback ref may solve your problem

const [loadMoreRef, setLoadMoreRef] = useState({ current: null });
const onRefSet = useCallback((ref) => {
    if (ref !== null) {
      setLoadMoreRef({ current: ref });
    }
}, []);

{canFetchMore && <div ref={onRefSet}>...</div>}

[rajatdhoot123]

Thanks @kennedy0527 this solves my loading twice issue