[FE] api 호출 개선 : 이벤트 페이지 진입 시 같은 api 7개씩 호출되는 문제

[jinhokim98]

issue

• close [FE] api 호출 개선 : 이벤트 페이지 진입 시 같은 api 7개씩 호출되는 문제 #922

문제 상황

이벤트 페이지 접속 시 같은 api 요청이 7~8번씩 발생하는 문제가 있었습니다.
event, steps, reports, all members 요청이 반복적으로 실행되어 초기에 30번 이상 요청을 보내는 모습을 보고 경악을;;;;;;

다행이 원인을 발견하였고, SuspenseQueries의 initialData를 설정해주지 않아서였습니다....

해결 방법

suspenseQueries 옵션으로 initialData를 설정하고 initialDataUpdatedAt: 0을 설정했습니다.
initialDataUpdatedAt: 0을 설정한 이유는 이를 설정하지 않으면 초기 데이터를 화면에 보여주고 api 요청을 보내지 않게 되기 때문입니다.

{
  queryKey: [QUERY_KEYS.event, eventId],
  queryFn: () => requestGetEvent({eventId}),
  initialData: {eventName: '', bankName: 'KB국민은행', accountNumber: '', createdByGuest: true},
  initialDataUpdatedAt: 0,
},

이렇게 하고 끝났을 때 문제가 하나 생겼습니다. 바로 Suspense의 Fallback 컴포넌트가 보이지 않게 된 것이었습니다.
SuspenseQueries를 적용한 이유가 로딩 화면을 선언적으로 보여주기 위함인데 이렇게 되어버리면 Suspense를 적용하는 의미가 없어진다고 생각했습니다.

2025-01-11.19-43-11.mp4

그래서 생각해낸 대안으로 queries 반환 값인 isFetching을 사용하는 것입니다.

const isFetching = queries.some(query => query.isFetching);

isFetching이 모두 false가 될 때까지 isFetching은 true가 되고 이 값이 true일 때 return null을 주어 데이터 fetching 중에는 하위 컴포넌트가 렌더링 되지 않도록 막았습니다. 이로써 fallback 컴포넌트가 보이면서 initial data가 보이는 현상을 막을 수 있었습니다.

2025-01-11.19-49-21.mp4

아쉬운 점

initial data를 넣어주지 않았을 때 왜 같은 요청이 7번씩 발생하는지 원인을 찾지 못 했어요. 어쩌다 보니 해결이 되었지만 원인을 명확하게 파악 후 해결한 것이 아니라 찜찜합니다..

🫡 참고사항

[soi-ha]

쿠키의 네트워크 요청 개선 덕분에 저희 서버 비용이 또 한층 줄어들었겠군요...!
쿠키 덕분에 event 페이지에서 네트워크 요청이 우다다다다닥! 쏟아지는 것을 확인하고 저도 경악했구요.. 그래서 원인을 찾아보려고 여러가지 뚱딱거려 봤는데.. 원인을 찾지 못했네요.. 왜 정확이 그런건지 궁금하군요...

그저 뭔가.. 값이 채워지지 않아서 계에에속 값이 채워질 때까지 api 요청을 보내는 것 같은데.. 이게 어디서 새고 있는 건지 모르겠네요...

[soi-ha]

쿠키 덕분에 요론게 있었구나를.. 알고 갑니다...!

[jinhokim98]

저도 웨디가 pr에서 활용한 것을 보고 적용해봤습니다!