react query의 refetch와 invalidatequries 차이 알고 쓰기

언제 어떤 메서드를 사용하는 것이 좋을 지 궁금해서 적어보는 글

 

📌 공통점

refetch와 invalidateQueries 둘 다 리액트 쿼리의 캐시된 데이터를 무효화 시키는 메서드이다.

 

📌 차이점

사용 목적은 같지만 메서드별로 동작과 사용시기가 다르다.

refetch

- 쿼리를 새로고침하여 바로 데이터를 다시 fetch 한다.

 

- 바로 fetch한 결과를 바로 볼 수 있다는 것이 장점이다.

- 사용 예시) 새로고침 버튼을 눌러 최신 데이터를 수동으로 가져올 때

 

invalidateQueries

- 쿼리의 캐시를 무효화하여 stale한 상태로 만든다.

- 1) 컴포넌트가 다시 마운트되거나

2) 사용자가 포커스를 변경하거나

3) 네트워크가 다시 연결되거나

4) 자동 리페치 간격이 설정되어 있는 경우

간격에 따라서 다시 fetch 된다.

 

- 필요할 때 fetch 할 수 있어 리소스를 아낄 수 있다는 것이 장점이다.

- 사용 예시) 새로운 아이템을 등록한 후 아이템 목록을 업데이트 할 때