@infinite-table/infinite-react 0.4.13 → 0.5.1

package/src/components/DataSource/privateHooks/useLoadData.ts

@@ -0,0 +1,783 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { LazyGroupDataItem, LazyRowInfoGroup } from '..';
+import { DeepMap } from '../../../utils/DeepMap';
+import { LAZY_ROOT_KEY_FOR_GROUPS } from '../../../utils/groupAndPivot';
+import { raf } from '../../../utils/raf';
+import { useComponentState } from '../../hooks/useComponentState';
+import { ComponentStateGeneratedActions } from '../../hooks/useComponentState/types';
+import { useEffectWithChanges } from '../../hooks/useEffectWithChanges';
+import { Scrollbars } from '../../InfiniteTable';
+import { assignExcept } from '../../InfiniteTable/utils/assignFiltered';
+import { debounce } from '../../utils/debounce';
+import { RenderRange } from '../../VirtualBrain';
+import {
+  DataSourceDataParams,
+  DataSourceData,
+  DataSourceState,
+  DataSourceRemoteData,
+  DataSourceDataParamsChanges,
+} from '../types';
+
+import { getChangeDetect } from './getChangeDetect';
+
+const CACHE_DEFAULT = true;
+
+const getRafPromise = () =>
+  new Promise((resolve) => {
+    raf(resolve);
+  });
+
+const SKIP_DATA_CHANGES_KEYS = {
+  originalDataArray: true,
+  changes: true,
+};
+
+export function buildDataSourceDataParams<T>(
+  componentState: DataSourceState<T>,
+  overrides?: Partial<DataSourceDataParams<T>>,
+): DataSourceDataParams<T> {
+  const sortInfo = componentState.multiSort
+    ? componentState.sortInfo
+    : componentState.sortInfo?.[0] ?? null;
+
+  const dataSourceParams: DataSourceDataParams<T> = {
+    append: false,
+    originalDataArray: componentState.originalDataArray,
+    sortInfo,
+    groupBy: componentState.groupBy,
+    pivotBy: componentState.pivotBy,
+    filterValue: componentState.filterValue,
+    aggregationReducers: componentState.aggregationReducers,
+  };
+
+  if (dataSourceParams.groupBy) {
+    dataSourceParams.groupRowsState = componentState.groupRowsState.getState();
+  }
+
+  if (componentState.livePagination !== undefined) {
+    dataSourceParams.livePaginationCursor = componentState.livePaginationCursor;
+    dataSourceParams.__cursorId = componentState.cursorId;
+  }
+
+  if (componentState.lazyLoad) {
+    if (
+      componentState.lazyLoadBatchSize != null &&
+      componentState.lazyLoadBatchSize > 0
+    ) {
+      dataSourceParams.lazyLoadBatchSize = componentState.lazyLoadBatchSize;
+      dataSourceParams.lazyLoadStartIndex = 0;
+    }
+    dataSourceParams.groupKeys = [];
+  }
+
+  if (overrides) {
+    Object.assign(dataSourceParams, overrides);
+  }
+
+  if (dataSourceParams.filterValue && dataSourceParams.filterValue.length) {
+    dataSourceParams.filterValue = dataSourceParams.filterValue.map((f) => {
+      const value = { ...f };
+      // delete it as it's not serializable
+      // and we want to make it easier for developers to send this filterValue
+      // as is on the server
+      delete value.valueGetter;
+      return value;
+    });
+  }
+
+  const changes: DataSourceDataParamsChanges<T> = {};
+
+  const oldDataSourceParams: Partial<DataSourceDataParams<T>> =
+    componentState.dataParams || {};
+
+  for (const k in dataSourceParams) {
+    //@ts-ignore
+    if (dataSourceParams.hasOwnProperty(k) && !SKIP_DATA_CHANGES_KEYS[k]) {
+      const key = k as keyof DataSourceDataParams<T>;
+      if (dataSourceParams[key] !== oldDataSourceParams[key]) {
+        //@ts-ignore
+        changes[key] = true;
+      }
+    }
+  }
+
+  dataSourceParams.changes = changes;
+
+  return dataSourceParams;
+}
+
+export function loadData<T>(
+  data: DataSourceData<T>,
+  componentState: DataSourceState<T>,
+  actions: ComponentStateGeneratedActions<DataSourceState<T>>,
+  overrides?: Partial<DataSourceDataParams<T>>,
+) {
+  const dataParams = buildDataSourceDataParams(componentState, overrides);
+  const append = dataParams.append;
+
+  if (componentState.lazyLoad) {
+    const lazyGroupData = componentState.originalLazyGroupData;
+    const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...(dataParams.groupKeys || [])];
+    const existingGroupRowInfo = lazyGroupData.get(key);
+
+    if (!existingGroupRowInfo) {
+      const groupCacheKeys = [
+        ...(dataParams.groupKeys || []),
+        dataParams.lazyLoadStartIndex,
+      ];
+      componentState.lazyLoadCacheOfLoadedBatches.set(groupCacheKeys, true);
+    }
+
+    if (existingGroupRowInfo && existingGroupRowInfo.cache && key.length > 1) {
+      const items = existingGroupRowInfo.children;
+      const len = items.length;
+      let allLoaded = true;
+      for (let i = 0; i < len; i++) {
+        if (items[i] == null) {
+          allLoaded = false;
+          break;
+        }
+      }
+      if (allLoaded) {
+        return Promise.resolve<any>(true);
+      }
+    }
+
+    if (existingGroupRowInfo) {
+      // if there's a group row already, make sure it's marked as loading its children
+      if (!existingGroupRowInfo.childrenLoading) {
+        existingGroupRowInfo.childrenLoading = true;
+      }
+    } else {
+      // there's no info for this group yet, so create it
+      // #creategroupdatabeforeload
+      lazyGroupData.set(key, {
+        error: undefined,
+        children: [],
+        childrenLoading: true,
+        childrenAvailable: false,
+        cache: CACHE_DEFAULT,
+        totalCount: 0,
+        totalCountUnfiltered: 0,
+      });
+    }
+    actions.originalLazyGroupDataChangeDetect = getChangeDetect();
+  }
+
+  if (typeof data === 'function') {
+    data = data(dataParams);
+  }
+
+  const dataIsPromise =
+    //@ts-ignore
+    typeof data === 'object' && typeof data.then === 'function';
+
+  if (dataIsPromise && !componentState.lazyLoad) {
+    actions.loading = true;
+  }
+
+  return Promise.resolve(data).then((dataParam) => {
+    // dataParam can either be an array or an object with a `data` array property
+    let dataArray: T[] | LazyGroupDataItem<T>[] = [] as T[];
+    let skipAssign = false;
+
+    if (Array.isArray((dataParam as DataSourceRemoteData<T>).data)) {
+      const remoteData = dataParam as DataSourceRemoteData<T>;
+      dataArray = remoteData.data;
+
+      if (remoteData.livePaginationCursor !== undefined) {
+        actions.livePaginationCursor = remoteData.livePaginationCursor;
+      }
+      if (remoteData.mappings) {
+        actions.pivotMappings = remoteData.mappings;
+      }
+      if (remoteData.totalCountUnfiltered) {
+        actions.unfilteredCount = remoteData.totalCountUnfiltered;
+      }
+
+      if (componentState.lazyLoad) {
+        // #staleLazyGroupData
+        // because cloning would make a copy of it and
+        // multiple promised calls can be concurrent
+        // they would act on clones of the data
+        // and the last one will win and override
+        // previous ones (in the same concurrency window)
+        // therefore we use originalLazyGroupDataChangeDetect
+        // to trigger re-renders and in hooks (useEffect, etc)
+        // whenever we want to check if originalLazyGroupData has changed
+
+        // const lazyGroupData = DeepMap.clone(
+        //   componentState.originalLazyGroupData,
+        // );
+
+        const lazyGroupData = componentState.originalLazyGroupData;
+
+        function resolveRemoteData(
+          keys: any[],
+          remoteData: DataSourceRemoteData<T>,
+          parentKeys?: any[],
+        ) {
+          const theKey = [LAZY_ROOT_KEY_FOR_GROUPS, ...keys];
+          const dataArray = remoteData.data as LazyGroupDataItem<T>[];
+          const newGroupRowInfo: LazyRowInfoGroup<T> = {
+            cache: !!remoteData.cache ?? CACHE_DEFAULT,
+            childrenLoading: false,
+            childrenAvailable: true,
+            totalCount: remoteData.totalCount ?? dataArray.length,
+            totalCountUnfiltered: remoteData.totalCount ?? dataArray.length,
+            children: dataArray,
+            error: remoteData.error,
+          };
+
+          const childDatasets: {
+            keys: KeyType[];
+            dataset: DataSourceRemoteData<T>;
+          }[] = [];
+
+          if (dataParams.lazyLoadBatchSize && !parentKeys) {
+            const existingGroupRowInfo = lazyGroupData.get(theKey);
+            const isGroupNew = !existingGroupRowInfo;
+
+            // make sure we update the existing info with what we received from the server
+            // because the existing one was probably created artificially
+            // even before the initial response is received - see #creategroupdatabeforeload
+            // so the totalCount was not set correctly
+            const currentGroupRowInfo = assignExcept(
+              {
+                children: true,
+              },
+              existingGroupRowInfo || {},
+              newGroupRowInfo,
+            );
+
+            if (isGroupNew) {
+              currentGroupRowInfo.chidren = [];
+            }
+
+            currentGroupRowInfo.children.length =
+              currentGroupRowInfo.totalCount;
+
+            const start = dataParams.lazyLoadStartIndex ?? 0;
+            const end = Math.min(
+              remoteData.totalCount ?? dataArray.length,
+              start + dataParams.lazyLoadBatchSize,
+            );
+
+            for (let i = start; i < end; i++) {
+              const it = newGroupRowInfo.children[i - start];
+              if (!it) {
+                throw `lazily loaded item not found at index ${i - start}`;
+              }
+              currentGroupRowInfo.children[i] = it;
+
+              if (it.dataset) {
+                childDatasets.push({
+                  keys: it.keys,
+                  dataset: it.dataset,
+                });
+              }
+            }
+            if (isGroupNew) {
+              lazyGroupData.set(theKey, currentGroupRowInfo);
+            }
+          } else {
+            // if (parentKeys) {
+            newGroupRowInfo.children.forEach((child) => {
+              if (child && child.dataset) {
+                childDatasets.push({
+                  keys: child.keys,
+                  dataset: child.dataset,
+                });
+              }
+            });
+
+            // we need this assignment, in order to make the group
+            // accomodate all children that will potentially be lazily loaded
+            newGroupRowInfo.children.length = newGroupRowInfo.totalCount;
+            // }
+
+            lazyGroupData.set(theKey, newGroupRowInfo);
+          }
+
+          let skipTriggerChangeAsAlreadyOriginalArrayWasUpdated = false;
+
+          if (!keys || !keys.length) {
+            const topLevelLazyGroupData = lazyGroupData.get([
+              LAZY_ROOT_KEY_FOR_GROUPS,
+            ]);
+
+            //@ts-ignore
+            actions.originalDataArray = [...topLevelLazyGroupData.children];
+            skipTriggerChangeAsAlreadyOriginalArrayWasUpdated = true;
+          }
+          // actions.originalLazyGroupData = lazyGroupData;
+          // see above #staleLazyGroupData
+          if (!skipTriggerChangeAsAlreadyOriginalArrayWasUpdated) {
+            actions.originalLazyGroupDataChangeDetect = getChangeDetect();
+          }
+
+          if (childDatasets.length) {
+            const parentKeys = keys;
+            childDatasets.forEach(({ keys, dataset }) => {
+              resolveRemoteData(keys, dataset, parentKeys);
+            });
+          }
+        }
+
+        skipAssign = true;
+        resolveRemoteData(dataParams.groupKeys || [], remoteData);
+      }
+    } else {
+      dataArray = dataParam as T[];
+    }
+
+    if (!skipAssign) {
+      actions.originalDataArray = append
+        ? componentState.originalDataArray.concat(dataArray as any as T[])
+        : (dataArray as any as T[]);
+    }
+
+    if (dataIsPromise && !componentState.lazyLoad) {
+      // if on the same raf as the actions.loading = true above
+      // this could fail if #samevaluecheckfailswhennotflushed is present
+      actions.loading = false;
+    }
+  });
+}
+
+export function useLoadData<T>() {
+  const {
+    getComponentState,
+    componentActions: actions,
+    componentState,
+  } = useComponentState<DataSourceState<T>>();
+
+  const {
+    data,
+    dataArray,
+    notifyScrollbarsChange,
+    sortInfo,
+    groupBy,
+    pivotBy,
+    filterValue,
+    livePagination,
+    livePaginationCursor,
+    cursorId: stateCursorId,
+  } = componentState;
+
+  const [scrollbars, setScrollbars] = useState<Scrollbars>({
+    vertical: false,
+    horizontal: false,
+  });
+
+  const scrollbarsRef = useRef<Scrollbars>(scrollbars);
+
+  useEffect(() => {
+    notifyScrollbarsChange.onChange((scrollbars: Scrollbars | null) => {
+      if (!scrollbars) {
+        return;
+      }
+
+      scrollbarsRef.current = scrollbars;
+      setScrollbars(scrollbars);
+    });
+    return () => notifyScrollbarsChange.destroy();
+  }, [notifyScrollbarsChange]);
+
+  useEffect(() => {
+    if (!livePagination) {
+      return;
+    }
+    // this is synced with - ref #lvpgn - search in codebase this ref to understand more
+    const frameId = requestAnimationFrame(() => {
+      if (!scrollbarsRef.current?.vertical) {
+        if (livePaginationCursor) {
+          // this line makes it so that when we have live pagination, with a livePaginationCursor,
+          // if the data that was loaded does not fill the whole viewport, we need to keep requesting the new
+          // batch of data - so this assignment here does that
+          actions.cursorId = livePaginationCursor;
+        }
+      }
+    });
+
+    return () => cancelAnimationFrame(frameId);
+  }, [livePaginationCursor]);
+
+  useEffect(() => {
+    if (!livePagination || livePaginationCursor !== undefined) {
+      // the case when `livePaginationCursor` is defined is handled in the effect above
+      return;
+    }
+
+    const frameId = requestAnimationFrame(() => {
+      if (!scrollbarsRef.current?.vertical) {
+        // this line makes it so that when we have live pagination, with a livePaginationCursor,
+        // if the data that was loaded does not fill the whole viewport, we need to keep requesting the new
+        // batch of data - so this assignment here does that - basically we're use dataArray.length as the cursor
+        // #useDataArrayLengthAsCursor ref
+
+        if (stateCursorId != null && dataArray.length) {
+          actions.cursorId = dataArray.length;
+        }
+      }
+    });
+
+    return () => cancelAnimationFrame(frameId);
+  }, [dataArray.length, livePaginationCursor]);
+
+  useEffect(() => {
+    const state = getComponentState();
+
+    const { livePaginationCursor, livePagination, dataArray } = state;
+
+    if (!scrollbars.vertical && livePagination) {
+      // it had vertical scroll but now it doesn't
+
+      // the current case is when the grid was loaded initially and had data + vertical scrollbar
+      // but now the viewport has been resized to fit all the rows and there is extra vertical space
+      // so we're in a position where we need to request the next batch of data
+
+      if (livePaginationCursor) {
+        // only do this if livePaginationCursor is defined and not zero
+        actions.cursorId = livePaginationCursor;
+      } else if (livePaginationCursor === undefined && dataArray.length) {
+        // there is no cursor passed as a prop, so we use dataArray.length as a cursor
+        // so only do this if the length > 0
+        // #useDataArrayLengthAsCursor ref
+
+        actions.cursorId = dataArray.length;
+      }
+    }
+  }, [scrollbars.vertical]);
+
+  const depsObject = {
+    sortInfo,
+    groupBy,
+    pivotBy,
+    filterValue,
+    cursorId: livePagination ? stateCursorId : null,
+  };
+
+  const initialRef = useRef(true);
+
+  useLazyLoadRange<T>();
+
+  useEffectWithChanges(
+    () => {
+      const componentState = getComponentState();
+      if (typeof componentState.data !== 'function') {
+        loadData(componentState.data, componentState, actions);
+      }
+    },
+    { data },
+  );
+
+  useEffectWithChanges(
+    (changes) => {
+      const appendWhenLivePagination =
+        Object.keys(changes).length === 1 && !!changes.cursorId;
+
+      const componentState = getComponentState();
+      if (typeof componentState.data === 'function') {
+        loadData(componentState.data, componentState, actions, {
+          append: appendWhenLivePagination,
+        });
+      }
+    },
+    { ...depsObject, data },
+  );
+
+  // only for initial triggering `onDataParamsChange`
+  useEffectWithChanges((_changes, _prevValues) => {
+    const componentState = getComponentState();
+    if (initialRef.current) {
+      initialRef.current = false;
+
+      const dataParams = buildDataSourceDataParams(componentState);
+      actions.dataParams = dataParams;
+    }
+  }, depsObject);
+}
+
+function useLazyLoadRange<T>() {
+  const {
+    getComponentState,
+    componentActions: actions,
+    componentState,
+  } = useComponentState<DataSourceState<T>>();
+
+  useEffect(() => {
+    actions.lazyLoadCacheOfLoadedBatches = new DeepMap<string, true>();
+  }, [componentState.data, componentState.dataParams]);
+
+  // const loadingCache = useMemo<Map<string, true>>(() => {
+  //   return new Map();
+  // }, [componentState.data, componentState.dataParams]);
+
+  const {
+    lazyLoadBatchSize,
+    lazyLoad,
+    originalLazyGroupDataChangeDetect,
+    notifyRenderRangeChange,
+    dataArray,
+    groupRowsState,
+    scrollStopDelayUpdatedByTable,
+  } = componentState;
+
+  const latestRenderRangeRef = useRef<RenderRange | null>(null);
+
+  const loadRange = (
+    renderRange?: RenderRange | null,
+    cache: DeepMap<string, true> = getComponentState()
+      .lazyLoadCacheOfLoadedBatches,
+  ) => {
+    const componentState = getComponentState();
+    renderRange = renderRange || latestRenderRangeRef.current;
+    if (!renderRange) {
+      return;
+    }
+    const { renderStartIndex: startIndex, renderEndIndex: endIndex } =
+      renderRange;
+
+    const { lazyLoadBatchSize, lazyLoad } = componentState;
+
+    if (!lazyLoad) {
+      return;
+    }
+
+    if (!lazyLoadBatchSize || lazyLoadBatchSize <= 0) {
+      // when the batch size is not defined
+      // we could still have rows that should be lazily loaded
+      // eg: some rows are defined as expanded in the `groupRowsState`, so
+      // if we detect some rows like this, we need to try and lazily load them
+
+      // but if there is no grouping, there will be no such rows,
+      // so we can safely return
+      if (!componentState.groupBy || componentState.groupBy.length === 0) {
+        return;
+      }
+    }
+
+    lazyLoadRange(
+      {
+        startIndex,
+        endIndex,
+        lazyLoadBatchSize,
+        componentState,
+        componentActions: actions,
+      },
+      cache,
+    );
+  };
+
+  const debouncedLoadRange = useMemo(
+    () => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }),
+    [scrollStopDelayUpdatedByTable],
+  );
+
+  useEffectWithChanges(
+    (changes) => {
+      if (lazyLoad) {
+        // when there is changes in lazily loaded data or group row state
+        // we need to trigger another loadRange immediately,
+
+        if (
+          changes.originalLazyGroupDataChangeDetect ||
+          changes.groupRowsState
+        ) {
+          loadRange(notifyRenderRangeChange.get());
+        }
+        // even before waiting for the render range change, as that will only
+        // happen on user scroll or table viewport resize
+
+        // though loading a new range when the render range has changed is needed
+        return notifyRenderRangeChange.onChange(
+          (renderRange: RenderRange | null) => {
+            latestRenderRangeRef.current = renderRange;
+            loadRange(renderRange);
+          },
+        );
+      }
+      return;
+    },
+    {
+      lazyLoadBatchSize,
+      lazyLoad,
+      originalLazyGroupDataChangeDetect,
+      groupRowsState,
+    },
+  );
+
+  useEffect(() => {
+    if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
+      debouncedLoadRange();
+    }
+  }, [dataArray]);
+}
+
+function lazyLoadRange<T>(
+  options: {
+    startIndex: number;
+    endIndex: number;
+    lazyLoadBatchSize: number | undefined;
+    componentState: DataSourceState<T>;
+    componentActions: ComponentStateGeneratedActions<DataSourceState<T>>;
+  },
+  cache?: DeepMap<string, true>,
+) {
+  const {
+    startIndex,
+    endIndex,
+    lazyLoadBatchSize,
+    componentState,
+    componentActions,
+  } = options;
+
+  const { dataArray } = componentState;
+  const isRowLoaded = (index: number) => {
+    const rowInfo = dataArray[index];
+
+    // if (
+    //   rowInfo.isGroupRow &&
+    //   rowInfo.dataSourceHasGrouping &&
+    //   !rowInfo.collapsed && rowInfo.childrenAvailable
+    // ) {
+    //   return rowInfo.childrenAvailable;
+    // }
+
+    return rowInfo.data != null;
+  };
+
+  type FnCall = {
+    lazyLoadStartIndex: number;
+    lazyLoadBatchSize: number | undefined;
+    groupKeys: any[];
+  };
+
+  const perGroupFnCalls = new DeepMap<any, Record<any, FnCall>>();
+
+  // TODO remove this hack when DeepMap supports empty arrays as keys
+  const rootGroupKeys = ['_______xxx______'];
+
+  /**
+   * We're iterating on all rows from start to end indexes
+   */
+  for (let i = startIndex; i <= endIndex; i++) {
+    const rowInfo = dataArray[i];
+    if (!rowInfo) {
+      continue;
+    }
+    const rowLoaded = isRowLoaded(i);
+    const theGroupKeys =
+      rowInfo.dataSourceHasGrouping && rowInfo.groupKeys
+        ? [...rowInfo.groupKeys]
+        : [];
+
+    if (
+      rowInfo.isGroupRow &&
+      rowInfo.dataSourceHasGrouping &&
+      rowInfo.groupKeys
+    ) {
+      theGroupKeys.pop();
+    }
+    const cacheKeys = theGroupKeys.length ? theGroupKeys : rootGroupKeys;
+    const indexInGroup = rowInfo.dataSourceHasGrouping
+      ? rowInfo.indexInGroup
+      : rowInfo.indexInAll;
+
+    if (
+      rowInfo.isGroupRow &&
+      !rowInfo.collapsed &&
+      !rowInfo.childrenAvailable
+    ) {
+      // we might have expanded groups that have never been loaded
+      // so we need to try load them as well - not their batch in the parent group
+      // but rather the group they are expanding
+
+      const currentFnCall: FnCall = {
+        lazyLoadStartIndex: 0,
+        lazyLoadBatchSize,
+        groupKeys: rowInfo.groupKeys,
+      };
+      const cacheKeys = rowInfo.groupKeys;
+      let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
+
+      if (!cachedFnCalls?.[rowInfo.id]) {
+        const shouldSetFnCalls = !cachedFnCalls;
+
+        cachedFnCalls = cachedFnCalls || {};
+
+        if (!cachedFnCalls[rowInfo.id]) {
+          cachedFnCalls[rowInfo.id] = currentFnCall;
+        }
+
+        if (shouldSetFnCalls) {
+          perGroupFnCalls.set(cacheKeys, cachedFnCalls);
+        }
+      }
+    }
+
+    if (!rowLoaded && lazyLoadBatchSize != undefined) {
+      let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
+
+      const batchStartIndexInGroup =
+        Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
+      const offset = indexInGroup - batchStartIndexInGroup;
+      const absoluteIndexOfBatchStart =
+        dataArray[rowInfo.indexInAll - offset].indexInAll;
+
+      const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
+      const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
+
+      if (batchStartRowLoaded || cachedFnCalls?.[batchStartRowId]) {
+        continue;
+      }
+
+      const shouldSetFnCalls = !cachedFnCalls;
+
+      cachedFnCalls = cachedFnCalls || {};
+
+      const currentFnCall: FnCall = {
+        lazyLoadStartIndex: batchStartIndexInGroup,
+        lazyLoadBatchSize,
+        groupKeys: theGroupKeys,
+      };
+
+      if (!cachedFnCalls[batchStartRowId]) {
+        cachedFnCalls[batchStartRowId] = currentFnCall;
+      }
+
+      if (shouldSetFnCalls) {
+        perGroupFnCalls.set(cacheKeys, cachedFnCalls);
+      }
+    }
+  }
+
+  const initialPromise: Promise<any> = Promise.resolve(true);
+
+  const allFnCalls: FnCall[] = [];
+  perGroupFnCalls.topDownValues().forEach((record) => {
+    allFnCalls.push(...Object.values(record));
+  });
+
+  allFnCalls.reduce((promise, fnCall: FnCall) => {
+    const cacheKey = [...fnCall.groupKeys, fnCall.lazyLoadStartIndex];
+
+    if (cache && cache.has(cacheKey)) {
+      return promise;
+    }
+
+    cache?.set(cacheKey, true);
+    const args: [
+      DataSourceData<T>,
+      DataSourceState<T>,
+      ComponentStateGeneratedActions<DataSourceState<T>>,
+      Partial<DataSourceDataParams<T>>,
+    ] = [componentState.data, componentState, componentActions, fnCall];
+
+    // TODO make this whole function testable, so we can properly test multiple calls are not issued for the same batch (in the same group)
+
+    return promise.then(() => getRafPromise()).then(() => loadData(...args));
+  }, initialPromise);
+}