use-infinite-fetch.ts

import React, { useCallback } from 'react';

type FetchReducerActions<DataT> =
  | { type: 'REQUEST_START' }
  | { type: 'REQUEST_SUCCESS'; payload: DataT }
  | { type: 'REQUEST_ERROR'; error: Error }
  | { type: 'FETCH_NEXT_PAGE' }
  // use to fetch again after an error
  | { type: 'RETRY' };

type RequestState = 'idle' | 'loading' | 'success' | 'failure';
type FetchState<DataT> = {
  data: DataT[];
  lastLoadedPage: number;
  lastRequestedPage: number;
  requestState: RequestState;
  error: Error | null;
};

function fetchReducer<DataT>(state: FetchState<DataT>, action: FetchReducerActions<DataT>) {
  if (action.type === 'FETCH_NEXT_PAGE') {
    return {
      ...state,
      lastRequestedPage: state.lastLoadedPage + 1,
    };
  }

  if (action.type === 'REQUEST_START') {
    return {
      ...state,
      requestState: 'loading' as const,
      error: null,
    };
  }

  if (action.type === 'REQUEST_SUCCESS') {
    const pagesTmp = [...state.data];
    pagesTmp[state.lastRequestedPage] = action.payload;
    return {
      ...state,
      requestState: 'success' as const,
      lastLoadedPage: state.lastLoadedPage + 1,
      data: pagesTmp,
    };
  }

  if (action.type === 'REQUEST_ERROR') {
    return {
      ...state,
      requestState: 'failure' as const,
      error: action.error,
    };
  }

  if (action.type === 'RETRY') {
    return {
      ...state,
      requestState: 'idle' as const,
      error: null,
    };
  }

  return state;
}

type FetcherArgs<DataT> = { index: number; previousPageData: DataT };
type Fetcher<DataT> = (args: FetcherArgs<DataT>) => Promise<DataT>;

type UseInfiniteFetchOptions<DataT> = {
  enabled?: boolean;
};

/**
 * API based in React Query: https://react-query.tanstack.com/guides/infinite-queries
 */
// eslint-disable-next-line import/prefer-default-export
export function useInfiniteFetch<DataT = any[]>(fetcher: Fetcher<DataT>, options: UseInfiniteFetchOptions<DataT> = {}) {
  const { enabled = true } = options;

  // this type couldn't be inferred automatically
  type ReducerType = React.Reducer<FetchState<DataT>, FetchReducerActions<DataT>>;
  const [state, dispatch] = React.useReducer<ReducerType>(fetchReducer, {
    data: [],
    lastLoadedPage: -1,
    lastRequestedPage: 0,
    requestState: 'idle',
    error: null,
  });

  const fetcherRef = React.useRef<typeof fetcher>();

  React.useEffect(() => {
    fetcherRef.current = fetcher;
  });

  React.useEffect(() => {
    if (enabled && state.requestState === 'idle' && state.lastLoadedPage < state.lastRequestedPage) {
      dispatch({ type: 'REQUEST_START' });

      fetcherRef
        .current({ previousPageData: state.data[state.lastLoadedPage], index: state.lastRequestedPage })
        .then((payload) => {
          dispatch({ type: 'REQUEST_SUCCESS', payload });
        })
        .catch((error) => {
          dispatch({ type: 'REQUEST_ERROR', error });
        });
    }
  }, [enabled, dispatch, state.data, state.lastLoadedPage, state.lastRequestedPage, state.requestState]);

  const fetchNextPage = useCallback(() => {
    dispatch({ type: 'FETCH_NEXT_PAGE' });
  }, [dispatch]);

  return {
    data: state.data,
    error: state.error,
    requestState: state.requestState,
    fetchNextPage,
  };
}