Function useInfiniteQuery

src/preact/hooks/useInfiniteQuery.ts:53–119

({
  fetchPage,
  getNextPageParam,
}: InfiniteQueryConfig<TPage, TPageParam>)

 * });
 */
export function useInfiniteQuery<TPage, TPageParam>({
  fetchPage,
  getNextPageParam,
}: InfiniteQueryConfig<TPage, TPageParam>): InfiniteQueryResponse<TPage> {
  const [state, setState] =
    useStateSafe<InfiniteQueryState<TPage>>(initialState);

  // Use a ref to keep these current:
  const ref = useValueRef({fetchPage, getNextPageParam, state});

  // Used for ignoring outdated requests:
  const fetchIndexRef = useRef(0);

  // Loads the next page of data
  const loadMore = useCallback(
    async (resetting = false) => {
      const {fetchPage, getNextPageParam, state} = ref.current;

      if (!resetting && state.loading) {
        return;
      }

      const fetchIndex = ++fetchIndexRef.current;

      setState((s) => ({...s, loading: true}));

      const pages: TPage[] = resetting ? [] : state.pages;
      const lastPage = pages.length ? pages[pages.length - 1] : undefined;

      try {
        const newPage = await fetchPage({
          pageParam: lastPage ? getNextPageParam(lastPage) : undefined,
        });

        if (fetchIndex !== fetchIndexRef.current) {
          // A new request has been started; cancel this one:
          return;
        }

        const nextPageParam = getNextPageParam(newPage);

        setState({
          loading: false,
          error: null,
          pages: [...pages, newPage],
          hasMore: nextPageParam !== undefined && nextPageParam !== null,
        });
      } catch (error) {
        if (fetchIndex !== fetchIndexRef.current) {
          // A new request has been started; cancel this one:
          return;
        }

        setState((s) => ({...s, loading: false, error}));
      }
    },
    [ref, setState]
  );