React Infinite Scroll Hook using react-query and react-busser

useInfiniteScrollForQueries.tsx

import { useEffect, useRef } from "react";
import { useIsDOMElementVisibleOnScreen } from "react-busser";
import type { InfiniteQueryResult, InfiniteQueryKey, InfiniteQueryFunction, InfiniteQueryOptions } from "react-query";
import { useInfiniteQuery } from "react-query";

export type InfiniteScrollQueryOptions<TK, TR, TMV, TE> = {
  queryKey: InfiniteQueryKey<TK>;
  queryFn?: InfiniteQueryFunction<TR, TK, TMV>;
  config?: InfiniteQueryOptions<TR, TMV, TE>;
};

export function useInfiniteScrollForQueries  <K, D, T, E = Error>(queryOptions: InfiniteScrollQueryOptions<K, D, T, E>, scrollOptions = { rootMargin: "0px", threshold: 1 }) {
  const { fetchNextPage, hasNextPage, ...query } = useInfiniteQuery(queryOptions);
  const [ isIntersecting, domElementRef ] = useIsDOMElementVisibleOnScreen(scrollOptions);

  /* @HINT: Use the latest ref pattern */
  const fetcher = useRef(fetchNextPage);

  useEffect(() => {
    fetcher.current = fetchNextPage;
  });
  
  useEffect(() => {
    if (isIntersecting && hasNextPage) {
      fetcher.current();
    }
  }, [isIntersecting, hasNextPage]);

  const queryResult = { ...query, hasNextPage, fetchNextPage } as InfiniteQueryResult<D, T, E>;

  return [queryResult, domElementRef] as const;
}