[React] React-Query 쿼리무효화, queryClient.invalidateQueries()

React-Query를 사용하여 useMutation Hook을 만들고 API서버에 POST요청을 하여 데이터를 추가하였다. 

 

이때 해당 키를 가지고 있는 쿼리를 무효화시키고 리패치를 하여 view에 바로 변경사항이 반영되도록 하기 위해 

useMutation의 onSuccess 함수 안에 queryClient.invalidateQueries()를 사용하여 쿼리 무효화를 했다.

 

분명 devTool 에는 fresh, stale의 과정을 거치면서 쿼리가 무효화되고 리패칭이 되는 것을 확인했는데, view에는 변경사항이 바로 반영되지 않았으며, POST요청을 두 번 보냈을 때 변경사항이 반영되었다. 

 

아마 시간차?의 문제라고 생각하고 

위와 같이 POST요청 후 성공적으로 서버에 전송한 데이터를 Create 한 1초 후에 쿼리 무효화를 진행하도록 변경해보았다.

 

변경사항이 view에 바로바로 반영되는 것을 확인할 수 있었다.

 

 

 

 

 

 

----------------------------------------------------------------------------------------------------------------------

*1월 24일 수정

 

쿼리 무효화는 꼭 필요할 때만 사용하며, 리패칭이 필요한 경우 useQuery가 반환하는 refetch 함수를 사용하는 것이 좋다. (refetch 함수를 사용했을 때, 똑같이 작동하였다.)

또한 setTimeout 함수는 프로세스의 진행이 꼬일 수 있으므로, 최대한 사용하지 않는다.