[react/공부] invalidateQuery와 refetchQueries 차이점 및 queryClient 메소드
invalidateQuery와 refetchQueries 차이점 및 queryClient 메소드
쿼리 클라이언트 메소드
| 메소드 | 설명 |
|---|---|
| queryClient.getQueryData('key') | 캐싱된 데이터를 가져옴 (API 요청 없음) |
| queryClient.setQueryData('key', data) | 캐싱된 데이터를 즉시 업데이트 |
| queryClient.invalidateQueries('key') | 다음 패치 시 새로운 데이터로 업데이트 |
| queryClient.refetchQueries('key') | 즉시 새로운 데이터를 불러옴 |
| queryClient.removeQueries('key') | 해당 캐시를 삭제 |
| queryClient.fetchQuery('key', fetchFn) | 새로운 데이터를 API 요청 후 가져옴 |
혼자 사용할 수 있을까?
01 디비와 연결되는 메소드
invalidateQueries, fetchQuery, refetchQueries는 디비와 직접적으로 연결되기 때문에
useQuery나 useMutation 내부에서 사용해야 한다.
02 독립적으로 사용 가능한 메소드
getQueryData, setQueryData, removeQueries 같은 메소드는 디비와 연결되지 않으며, 독립적으로 사용 가능하다.
캐시를 업데이트 해주는 세 가지 메소드
캐시를 새롭게 업데이트 해주는 방법은 세가지가 있는데, 모두 기존 캐쉬를 무시하고 새로운 데이터를 덮어씌운다.
그 세가지 메소드가 정말 너무 헷갈려서 튜터님께도 여쭤보고 gpt랑 씨름하고 구글링을 정말 많이 했다......
01 setQueryData
setQueryData는 DB와 상관없이 사용자가 임의적으로 데이터를 수정하고 덮어 씌울 수 있다.
따라서 DB와 직접적으로 소통하는 아래 두 메소드와는 조금 다른 형태
02 invalidateQueries vs refetchQueries
invalidateQueries와 refetchQueries는 모두 디비와 연결되어 있으며 새로운 정보를 덮어 씌우는 역할을 한다.
아무리 찾아봐도 같아보여서 찾다찾다 이해가 가는 차이점을 발견했는데,
- invalidateQueries: 데이터가 변하긴 하지만, 곧바로 반영되지 않고 다음 패치 때 반영
- refetchQueries: 데이터를 즉시 다시 불러오고, 화면에도 바로 반영
그래서 예를 들면
쇼핑몰의 장바구니에 아이템을 담는 경우, 해당 아이템은 invalidateQueries로 관리한다.
(장바구니 페이지에 가야지만 확인하는 데이터이므로 곧바로 반영될 필요가 없음)
쇼핑카트 아이콘 위에 나타나는 아이템 개수는 즉시 UI에 반영되어야 하므로 refetchQueries를 사용한다.
이 차이를 잘 이해하면 상황에 맞는 메소드를 선택하는 데 도움이 된다.
이거 이해해서 너무 뿌듯하고....... 행복하고..........
차이점을 명확히 알지 않아도 될 거 같아서 중간에 포기할까 했지만,
막상 알고나니 나름 중요한 차이점이었어서 끝까지 파고 알아내길 잘한 거 같다.