Recursive fetch all items of a graphql connection using relay refetch container

useRecursiveRefetch.tsx

import { useState, useEffect } from 'react';
import { RelayRefetchProp } from 'react-relay';

const TOTAL_REFETCH_ITEMS = 1000;

type PageInfo = {
  hasNextPage: boolean;
  startCursor: string | null;
  endCursor: string | null;
};

type Edge<T> = {
  cursor: string;
  node: T;
};

type Connection<T> = {
  count: number;
  totalCount: number;
  endCursorOffset: number;
  startCursorOffset: number;
  pageInfo: PageInfo;
  edges: Edge<T>[];
};

type RecursiveRefetch<T> = {
  connection: Connection<T>;
  relay: RelayRefetchProp;
  totalRefetchItems?: number;
};
export const useRecursiveRefetch = <T extends object>({
  connection,
  relay,
  totalRefetchItems = TOTAL_REFETCH_ITEMS,
}: RecursiveRefetch<T>) => {
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [isFetching, setIsFetching] = useState<boolean>(false);

  const { pageInfo, edges } = connection;

  const recursiveRefetch = () => {
    if (!pageInfo.hasNextPage) {
      setIsLoading(false);
      setIsFetching(false);
      return;
    }

    if (pageInfo.hasNextPage) {
      setIsFetching(true);

      const total = edges.length + totalRefetchItems;
      const renderVariables = { first: total };

      const refetchVariables = fragmentVariables => ({
        ...fragmentVariables,
        first: totalRefetchItems,
        after: pageInfo.endCursor,
      });

      relay.refetch(refetchVariables, renderVariables, () => {
        setIsFetching(false);
      });
    }
  };

  useEffect(() => {
    if (!isLoading) {
      return;
    }

    if (!isFetching) {
      recursiveRefetch();
    }
  }, [isFetching]);

  return [isLoading];
};