Intro

지난번에 이어 사이드 프로젝트를 진행하던 중 한 가지 놓치고 있던 부분이 있었다.
바로 useInfiniteQuery를 사용해 무한 스크롤을 구현할 때, API로부터 데이터를 받아오지 못했을 경우 어떻게 처리해야 하는가라는 점이다.

무한 스크롤은 기본적으로 사용자가 스크롤을 내릴 때마다 새로운 페이지를 불러와 이어 붙이는 방식이다. 그런데 네트워크 오류나 서버 문제로 인해 다음 데이터를 가져오지 못한다면, UI가 멈추거나 빈 화면이 보이는 경험을 주어서는 안 된다.

(GPT에게 물어보니 그렇다한다 ㅋㅋ;)

일단 피드를 불러오는 API응답값을 이렇게 바꿨다

if(pageNumber) throw new Error('error!!')
return NextResponse.json({
    ok: true,
    data: postData,
    totalCount,
  });
} catch (e: any) {
  return NextResponse.json({ ok: false, error: e.message }, { status: 500 });
} finally {
}

그리고 상황을 얼추 맞추기위해서 다음 데이터를 불러올때 throw를 주었다.

위처럼 데이터를 2번 요청했을때 에러가 났다는걸 볼수 있었다. 이제 클릭하면 실패한 부분을 다시 fetch 하겠지?
엥 ? 클릭했는데 아무런 반응이 없는것이였다.. 이게 뭐지 싶어 동작하는 부분의 코드를 찍어봤는데


lastPage를 체크해주는 코드에서 ok가 false라서 undefined가 나고 막혀서 더이상 fetch를 진행하지 않는것이였다. 그럼 어떡하지? GPT한테 물어봤는데 nextFetch만 하면된단다(...)

TroubleShooting

GPT한테 답을 얻을수 없어서 이걸 refetch를 해야하나? 그렇게 하긴 싫은데..라고 생각하며 끙끙 거리고있을때 lastPage를 어떻게 하면 다시 그대로 fetch할수 있지 않을까 하고 GPT를 달달 볶던중 키워드를 얻고 해당 정보를 얻을수 있었다.

그렇다면 setQueryData를 사용해 실패한 데이터를 지운다면 lastPage가 바뀌지않을까?
그래서 버튼의 이벤트를 fetchNextPage 대신 이런식으로

이렇게 바꿔주었고 두근거리는 마음으로 버튼을 다시 클릭하자

이런식으로 실패한 page=1이 재요청 되는걸 확인할수 있었다.

Conclusion

간단하게만 생각했는데 막상 해보니 생각보다 까다로웠다.
API로부터 데이터를 받아 화면에 뿌려주는 것까지는 비교적 단순하고 예상도 가능했지만, 내가 직접 API를 짜는 데 서툴기도 하고, 상황에 따라 발생하는 오류를 어떻게 처리해 사용자와 개발자 모두에게 자연스럽게 보여줄지가 정말 어렵게 느껴졌다. 지금 시도하고 있는 방식이 정답인지는 잘 모르겠지만, 일단 해야 할 일이 많으니 다음 단계로 나아가 보려고 한다.