[FE] api 호출 개선 : 지출 내역 추가 과정

[jinhokim98]

issue

• close [FE] api 호출 개선 : 지출 내역 추가 과정 #921

문제 상황

지출 내역을 추가할 때 인원을 추가하는 경우

개선 전

---

개선 전의 모습을 보면 api 호출이 총 5번이 일어나는 모습을 확인할 수 있고 그 중 current api는 두 번 요청되는 모습을 확인할 수 있습니다. 이 문제를 발견 후 각 페이지 별 캐시 상태를 비교해봤습니다. (위 세 번째 사진 참고)

여기서 주목할 데이터는 currentMembers 입니다. 지출 내역 추가 후 관리 페이지로 이동한 후에는 currentMembers 데이터가 필요하지 않지만 두 번이나 서버로 요청을 보내는 문제가 있었습니다.

문제 원인

useRequestPostMembers와 useRequestPostBill hook에서 mutate 실행 후 invalidate를 해주는 과정에서 불필요한 api가 호출되었습니다.

우선 invalidateQueries가 실행된 후 언제 서버로 api를 호출하는지 설명하겠습니다. invalidateQueries는 캐시 데이터를 fresh에서 stale상태로 무효화 시켜줍니다. 그러면 데이터가 상했으니 서버로부터 최신 데이터를 불러오게 됩니다. 여기서 서버로 요청을 보내는 조건은 캐시 데이터가 active할 때입니다. 캐시 데이터가 active하는 것은 현재 마운트 되어있는 컴포넌트에서 사용하는 데이터입니다.

이 점을 인지한 상태로 아래 코드를 보면 문제를 알 수 있습니다.

const handlePostBill = async () => {
  const newMembers = await postMembersAsync();
  postBill(newMembers);
};

useEffect(() => {
  if (isSuccessPostBill) {
    navigate(`/event/${eventId}/admin`);
  }
}, [isSuccessPostBill]);

먼저 handlePostBill가 실행되면 postMembersAsync이 실행된 후 onSuccess가 실행되어 allMembers, steps, reports, currentMembers 캐시 데이터가 무효화됩니다. 그 다음으로 postBill이 실행된 후 onSuccess가 실행되어 steps, reports, currentMembers 캐시 데이터가 무효화됩니다. 마지막으로 isSuccessPostBill 상태가 true가 되어 그제서야 관리 페이지로 이동합니다.

currentMembers를 특정해서 문제 상황을 살펴보면 postMembersAsync가 실행된 후 요청이 성공해서 currentMembers가 무효화 되었습니다. 이 순간은 페이지 이동하기 전이라 currentMembers 데이터가 active합니다. 그래서 즉시 서버로 currentMembers 요청을 보내게 됩니다. 그 후 postBill이 실행되고 요청이 성공하여 currentMembers가 무효화 되었습니다. 이 순간도 페이지 이동하기 전이라 currentMembers 데이터가 active합니다. 그래서 즉시 서버로 currentMembers 요청을 보내게 됩니다. 마지막으로 isSuccessPostBill 상태가 true가 되어 그제서야 관리 페이지로 이동하게 됩니다. 하지만 관리 페이지에서는 currentMembers 데이터가 inactive한 상태입니다.

해결 방법

우선 postMembersAsync mutation의 onSuccess에서 currentMembers invalidate를 지워줬습니다. postMembersAsync는 항상 postBill 전에만 실행이 되기 때문에 문제 없다고 판단했습니다.

그 다음으로 useRequestPostBill에서 currentMembers를 invalidateQueries에서 removeQueries로 바꿔줬습니다.

queryClient.removeQueries({queryKey: [QUERY_KEYS.currentMembers]});

여기서는 단순히 코드를 지우지 않고 변경해 준 이유는 지출 내역 추가가 됐음에도 currentMembers 상태가 변하지 않는다면 다음 지출 내역을 추가할 때 영향이 생길 수 있기 때문입니다. 처리는 해줘야 하지만 invalidateQueries를 사용하면 stale로 변하고 현재 데이터가 active하기 때문에 바로 서버로 요청이 갑니다. 이 때 removeQueries를 사용해서 캐시 데이터를 아에 지워버린다면 서버로 요청하는 시점을 다음 지출 내역 추가로 미룰 수 있게 됩니다. (캐시 데이터를 아예 삭제했으므로 currentMembers 캐시 상태는 stale도 아니게 돼서 다시 요청도 하지 않는 원리)

개선 결과

불필요한 currentMembers 요청을 두 개 줄이게 되어 get 요청을 이전 5번에서 3번으로 api 호출을 줄일 수 있었습니다.

🫡 참고사항