useInfiniteQuery를 사용할 때, getNextPageParam을 쿼리 옵션에 넣어줘야 하는데요. 이 함수는 (lastPage, allPages) => unknown | undefined 타입입니다. lastPage는 가장 마지막으로 불러온 페이지를 가리키고, allPages는 지금까지 불러온 모든 페이지를 가리킵니다. lastPage는 현재 Article[] 타입이고, allPages는 배열로 이뤄진 배열인 Article[][] 타입입니다.

이 함수에서는 pageParam으로 사용할 값을 결정합니다. 우리는 현재 가장 마지막으로 불러온 항목을 cursor 파라미터로 사용하고 있지요? 그렇기 때문에 가장 마지막으로 불러온 lastPage의 마지막 원소의 id 값을 반환하면 됩니다.

getNextPageParam에서 더 이상 조회할 수 있는 데이터가 없을 때는 undefined를 반환해야 합니다. 그래서 이 코드에서는 마지막으로 불러온 페이지에 항목이 10개가 있으면 다음 페이지가 존재할 수 있으니 마지막 항목의 id를 반환하고, 10개 미만이면 다음 페이지가 존재하지 않으니 undefined를 반환합니다.

useInfiniteQuery의 data는 { pageParams, pages } 타입을 가지고 있습니다. 여기서 pageParams는 각 페이지에서 사용된 파라미터 배열을 나타내고, pages는 각 페이지들을 배열 타입으로 나타냅니다. 즉, 현재 상황에서 pages의 타입은 Article[][]입니다.

현재 Articles 컴포넌트는 articles Prop의 타입이 Article[]이기 때문에 Article[][]로 이뤄져 있는 data.pages를 Article[]로 변환해줘야 합니다.