invalidate 반영 왜 안돼?
프로젝트 기간동안 해결하지 못했던 쿼리키 무효화 이슈..드디어 해결을 했다.
문제 상황은 아래와 같았다.
😤 A사이트에서 찜하기, 상품 추가, 리뷰 달기 기능을 수행하면 변경된 데이터가 B사이트에 바로 반영이 되어야 하는데, 새로고침을 해야 반영이 되었다.
삽질을 많이 하게 됐는데, 처음에는 쿼리키 이슈인줄 알고 쿼리키에 많은 변화를 줘봤다.
사실, 쿼리키 이슈도 초반에는 문제가 있었던 건 맞다.
queryClient.invalidateQueries({
queryKey: profileKeys.productCard(Number(userId), 'createdProduct'),
});userId를 zustand 라이브러리를 통해 받아오고 있었는데, 디버깅을 해보니 null이었던 것이다. 분명 받아온 것을 확인했는데 다시 확인하니 null이었다. 처음에는 zustand로 상태값을 저장한 페이지에 들렸다가 디버깅 한 페이지로 이동했었기 때문에 값이 잘 저장되는 것이었다. 초기값 null이 나왔을 때는 바로 해당 페이지로 이동했기 때문에, 당연 해당 값이 저장이 안되었던 것! (해당 함수가 속한 컴포넌트가 렌더링이 되어야 저장이 되든 말든 하지..) 팀원이 담당한 컴포넌트에 추가해야 되다보니 팀원의 코드 스타일을 고려해서 cookies에서 userId를 꺼내 사용하는 방법을 사용하기로 결정했다. accessToken도 이와같이 사용하고 있었기 때문에 같이 prop으로 전달하여 사용했다. 단, 아직 반영은 안 되는중..
시도한 두 번째 방법
queryClient.removeQueries({
queryKey: profileKeys.all
})
queryClient.invalidateQueries({
queryKey: profileKeys.productCard(Number(userId), 'createdProduct'),
})removeQueries로 특정 쿼리키에 해당하는 쿼리를 캐시에서 완전히 제거하게 되는데, 단점이 존재한다. (반영은 됐음)
쿼리 캐시에서 제거된 데이터는 다시 쿼리를 실행할 때까지 사용할 수 없으므로, 불필요하게 네트워크 요청이 증가할 수 있다는 것이다. 이로인해 사용자 경험도 저하시킬 수 있다는 것. 그래서 다음 방법을 찾아 나섰다.
refetchType: 'inactive'
결정적으로 해결할 수 있었던 한 줄기의 빛 같은 발견이었다. Tanstack Query v4가 되면서 refetchType이라는 속성이 등장하게 되었다. 기존에는 refetchOnMount로 사용이 되었는데, 타입 에러가 뜨는 것을 보아 refetchType이 추가가 된 것을 확인할 수 있었다.
찜하기 버튼을 누르면 useFavoriteMutation 함수가 실행이 되는데, 이때 데이터들을 불러오는 프로필 페이지는 비활성화 상태이다. refetchType:'inactive'속성은 비활성 쿼리를 다시 가져오게 해주는 기능을 담당하기 때문에 프로필 페이지에서 찜한 상품들을 불러오는 데이터들이 refetch가 되면서 업데이트가 바로 적용이 되는 것을 확인할 수 있었다.
(추가) zustand를 활용한 리팩토링
앞서 zustand를 사용했을 때 null이 반환되었다고 했었다. 또 다른 방법이 생각나서 적용해봤더니 잘 되었다. 바로 로그인 submit 함수에서 성공 시 zustand store에 userId값을 저장하는 것이다. 로그인을 하게 되면 백엔드에서 유저 정보에 대한 데이터를 전달해주기 때문에 데이터 내 id값을 리뷰 작성, 찜, 상품 등록 함수로 불러와 쿼리키로 사용하였다.
