Custom hook for infinite scrolling using React Query

useMarketplace.ts

import { useInfiniteQuery } from '@tanstack/react-query';

import { MarketplaceItem } from '../models';
import { getMarketplaceItems } from '../services';

export type UseMarketplaceItemsProps = {
  query: string;
  initialData?: MarketplaceItem[];
  from?: number;
  size?: number;
};

export const useMarketplaceItems = ({
  query,
  initialData,
  size,
}: UseMarketplaceItemsProps) => {
  return useInfiniteQuery<MarketplaceItem[]>(
    ['marketplace-items', query],
    ({ pageParam = 1 }) => {
      const from = (pageParam - 1) * size;
      return getMarketplaceItems(query, from, size)
    },
    {
      staleTime: 100000,
      keepPreviousData: true,
      refetchOnWindowFocus: false,
      getNextPageParam: (lastPage: unknown[], pages: unknown[]) => {
        let nextPage: number;
        if (lastPage?.length === size && pages) {
          nextPage = (pages.length || 0) + 1;
        }
        return nextPage;
      },
      ...(initialData && {
        initialData: {
          pages: [initialData],
          pageParams: [null],
        },
      }),
      useErrorBoundary: false,
    },
  )
}