Implementing Infinite Scroll with useInfiniteQuery

Based on the experience of transitioning to a new architecture for Oliveyoung's search results page, this shares how Infinite Scroll was implemented. The tech stack used was Next.js 12, React Query 3.39.0, and TypeScript 4.7.4.

Using the useInfiniteQuery hook, you can easily leverage features like fetchNextPage for requesting the next page of data and hasNextPage for checking whether a next page exists. In particular, the getNextPageParam option is used to determine the last page and control data fetching.

For implementation, the useInView hook from react-intersection-observer is used to detect when the last element enters the viewport. A Skeleton component is displayed during data loading to improve user experience, switching appropriately between the skeleton and actual content depending on the data fetching state.