인프런 커뮤니티 질문&답변

더보기 버튼 클릭 시 페이지 이동 (page=1 -> page=2) + 무한스크롤 구현 기능 구현이 필요해서 아래와 같이 구현해보았는데 어쩔땐 되고 어쩔땐 안되더라구요...

만약 데이터를 10개씩 불러올 경우 10개 -> 20개 -> 30개 -> 40개 이러다 갑자기 다시 10개가 됩니다...

원래 useInfiniteQuery 무한스크롤 구현 시 페이지이동하면서 기존 데이터를 보존하는 방법이 불가능한건지 아님 제가 코드를 잘못짠건지 궁금합니다...

const useInfiniteQuery = (params: Params) => {
  const searchParams = useSearchParams()
  const page = searchParams.get('page')

  return useInfiniteQuery({
    queryKey: [CONTENTS_KEY, params],
    queryFn: ({ pageParam }) => {
      return getContentsApiClient({ ...params, ...outLinkParams(), page: Number(pageParam) })
    },
    getNextPageParam: (lastPage, _, lastPageParam) => {
      // 마지막 page라면 hasNextPage가 false
      const lastPageNumber = Math.ceil(lastPage.totalCount / (params.size || 10))
      if (lastPageNumber === lastPageParam) {
        return undefined
      }

      return Number(lastPageParam) + 1
    },
    initialPageParam: Number(page) || 1,
    placeholderData: keepPreviousData,
  })
}

//더보기 버튼
// 클릭 시 페이지 이동

function AddMore({ fetchNextPage, totalPages }: { fetchNextPage: () => void; totalPages: number }) {
  const searchParams = useSearchParams()
  const pathname = usePathname()
  const params = new URLSearchParams(searchParams.toString())
  const pageNo = Number(searchParams.get('page') || 1)

  params.set('page', (pageNo + 1).toString())

  if (totalPages === pageNo) return null

  return (
    <div className={cn('wrap')}>
      <Link
        className={cn('link')}
        href={`${pathname}?${params.toString()}`}
        onClick={fetchNextPage}
        scroll={false}
      >
        <span className={cn('label')}>더보기</span>
      </Link>
    </div>
  )
}

 강의 잘 듣고있습니다. 감사합니다!

참고로 백엔드는 문제가 없습니다.