React Query에서 Get Data 하는데 useMutation을 ?!

 

단순하게 get 요청은 useQuey, useSuspenseQuery / post 요청은 useMutation이라고 생각했었는데,

이번 작업을 하면서 생각 해볼 일이 있어서 포스팅하게 됐다 ㅎㅎ

 

기존 이슈를 해결하기 위한 QA 작업을 진행하다 발견한 케이스이다 ㅎㅁㅎ

클릭 시점으로 데이터의 상태를 받아와야했는데, 훅에서 API를 호출하다보니

페이지 렌더링을 하면 훅이 호출되었고, 이후 refetch를 호출하게 하는 방식을 활용해도

오래된 기존 데이터 표출 후, 최신 데이터를 받아오는 문제..ㅎㅎ...

 

캐싱이 필요 없는 데이터이고, 클릭 시점의 상태를 받아와야 했기 때문에 useMutation으로 변경하니 잘 동작했다.

 

그런데 의문이 든 점!

1. get data 인데 useMutation으로 받아오는게 맞을까?

2. useQuery로 enabled 조건을 주면 어떨까? 

 

그래서 찾아보다 내린 결론!

1) 나는 버튼을 누른 시점의 데이터가 필요했기 때문에 캐싱이 필요 없었다.

따라서, 버튼을 눌렀을 때만 요청을 보내고 캐싱이 되지 않는 useMutation이 적합했음

 

2) enabled: false를 주면 초기 실행은 막을 수 있지만

같은 queryKey로 이전 캐시가 있으면, refetch() 시 기존 캐시 → 네트워크 요청 순서가 발생했을 것이기 때문에

처음 외에는 사실상 .. 같은 문제가 발생했을 것..

 

기존에는 get / post로 나눠놓고 생각했는데

이번 작업을 하며 캐싱 유무와 호출 시점으로 고려해봐야 한다는 것으로 다시 한 번 정리할 수 있었다 ㅎㅎ