(7.14) 포스트 삭제 후 무한 스크롤이 작동하지 않는 문제

안녕하세요. 좋은 강의 잘 수강하고 있습니다!

다름이 아니라 포스트 삭제 후에 무한 스크롤이 작동하지 않는 문제가 발생했습니다.

문제 상황은 다음과 같습니다.

1. 첫 페이지(다음 페이지의 데이터를 페칭하지 않은 상태)에서 작성한 포스트를 삭제

2. 이후 페이지 최하단까지 스크롤 했지만 무한 스크롤 데이터 페칭이 이루어지지 않음

    

부족한 실력이라 AI의 도움을 받아 원인을 분석했을 때 다음과 같았습니다. 아래는 AI의 답변입니다.

무한 스크롤이 작동하지 않는 원인 분석:getNextPageParam의 로직

useInfinitePostData 훅에서 다음 페이지를 불러올지 결정하는 로직은 다음과 같습니다:

// src\hooks\queries\use-infinite-posts-data.ts

// ...
const PAGE_SIZE = 5;

// ...
getNextPageParam: (lastPage, allPages) => {
  if (lastPage.length < PAGE_SIZE) return undefined; // 🚫 문제의 원인
  return allPages.length;
},

이 로직은 "마지막으로 불러온 페이지의 항목 개수가 PAGE_SIZE (5개)보다 적으면, 더 이상 데이터가 없으므로undefined를 반환하라 (즉, 다음 페이지를 불러오지 마라)"고 지시합니다.

삭제가 로직에 미치는 영향:

1. 초기 상태: 0번 페이지에 5개의 게시글이 있습니다. (lastPage.length = 5)

2. 삭제 이벤트: 사용자가 0번 페이지의 게시글 1개를 삭제합니다.

3. 캐시 업데이트:useDeletePost의 onSuccess에서 해당 게시글 ID를 0번 페이지의 캐시 데이터에서 제거합니다.

4. 결과: 0번 페이지의 항목 개수가 5개에서 4개로 줄어듭니다.

5. 무한 스크롤 시도: 사용자가 스크롤하여 ref(inView)가 활성화됩니다.

6. getNextPageParam 실행: React Query는 0번 페이지의 현재 캐시 데이터를 확인합니다. lastPage.length는 이제 4입니다.

7. 잘못된 판단:4 < PAGE_SIZE (5)이므로, getNextPageParam은 즉시 undefined를 반환합니다.

따라서 1번 페이지(실제 서버에는 데이터가 있을 수 있음)를 불러오기도 전에, 캐시 데이터가 줄어든 것 때문에 다음 페이지 로딩이 차단되어 무한 스크롤이 작동하지 않게 되는 것입니다.

마지막 페이지에 속한 포스트를 삭제했을 때, PAGE_SIZE보다 항상 작아지니 다음 페이지가 없다라고 판단하기에 무한 스크롤이 작동하지 않는다고 이해했습니다.

캐시를 무효화해 리페칭해서 해결하려고 하는데, 다른 대안이 있을까요?

혹여 제 실수로 잘못된 동작이 일어난 건지 GitHub Repo도 같이 첨부했습니다!

https://github.com/scseong/onebite-sns