[FE] react-query 캐싱 적용으로 인해 발생한 버그 해결

[soi-ha]

issue

• close [FE] react-query 캐싱 적용으로 인해 발생한 버그 해결 #711

수정 목적

저번 버전에서 gc,stale time을 추가하면서 새로운 행사를 생성해도 이전 행사의 데이터가 캐싱되는 현상이 발생했습니다. 물론 1분이 지나고 새로고침을 하면 사라지긴 합니다. 하지만, 즉각 행사를 생성하는 경우가 발생할 수 있기 때문에 수정을 진행했습니다.

수정 사항

Problem 1

새로운 지출내역을 생성해도 이전 지출내역의 참여자가 자동으로 추가되지 않는 문제가 발생했습니다.

• 해결

  Bill과 Member 에서 patch, post, delete를 요청하는 query hook에 queryClient.invalidateQueries({queryKey: [QUERY_KEYS.currentMembers]});를 추가해줬습니다.

  성공적으로 요청이 진행되면 currentMembers를 refetching합니다.

Problem 2

만들었던 행사가 존재하고 곧 바로 새로운 행사를 생성하면 이전 행사의 데이터가 들어오는 문제가 발생했습니다.

• 해결

  새로운 행사를 생성해도 이전의 데이터가 캐싱되어 발생한 문제였기에, 요청이 성공적으로 진행되면 event가 refetching 되도록 했습니다.

  onSuccess: () => {
    queryClient.invalidateQueries({queryKey: [QUERY_KEYS.event]});
  },

+) 쿠키가 토다리 피드백에 남겨줬던 내용을 해당 PR에서 반영했어요!

위에 작성한 Problem2의 내용을 쿠키가 준 피드백 방향으로 수정했습니다~!
removeQueries()와 resetQueries() 중에 어떤 것이 더 적절할까? 테스트를 해봤어요.
removeQueries()는 행사를 생성할 때 queryKey 또한 모두 초기화하고 resetQueries()는 queryKey는 그대로 존재하고 값만 제거하더라구요. 따라서 removeQueries()가 더 적절할 것 같아서 해당 메소드를 사용했습니다!

onSuccess: () => {
      queryClient.removeQueries();
    },

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-jpyhnyfpln.chromatic.com/

[jinhokim98]

소하 고생했어요!
확실히 캐시 시간이 설정되었다 보니 그동안 신경 쓰지 않아도 됐던 문제들이 발생하는 것 같아요. 그래도 덕분에 버그를 빨리 잡아서 다행입니다!

변경 사항을 보면서 우려되는 점이랑 제안이 하나 있는데 확인해보시면 좋을 것 같아 Request Change 했어요

[jinhokim98]

event 캐시 무효화가 되고 난 뒤에 QUERY_KEYS.steps, QUERY_KEYS.reports 것들도 같이 무효화가 됐을까요?

제 생각엔 navigate가 home으로 갔을 때 캐시를 전부 remove시켜도 좋을 것 같아요.
사용자가 홈으로 갔을 때 캐시를 전부 지운다면 여기서 event를 생성할 때 무효화 시키지 않아도 될 것 같아요

[soi-ha]

쿠키가 토다리 PR에 남겨준 것을 확인했어요! 그래서 토다리 PR에 남겨준 방식으로 수정했습니댱 ~

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-kqqdkzvqnm.chromatic.com/

[Todari]

맛있어요~