글을 읽고 정리해본다.
리액트 쿼리는 캐시된 데이터에 Stale이라는 상태가 있는데, 최신화가 필요하다는 의미다. 즉, 리페칭이 일어난다.
•
새로운 쿼리 인스턴스가 마운트될 때(페이지 이동)
•
화면 이탈 후 다시 포커스
•
네트워크 재연결
•
설정한 refetchInterval에 따라
refetchOnWindowFocus로 기본 refetch는 막을 수 있다.
staleTime 옵션은 stale(→refetch)되지 않게 막는 시간이다.
query에 액션이 없다면 캐시에서 5분 뒤에 사라진다. cacheTime으로 조절할 수 있는 값이다.
리액트 쿼리는 설정 없이 캐싱되지 않는다.
캐싱을 위해 staleTime, cacheTime을 알아야만 한다.
•
staleTime(0) : 이 시간이 지나면 썩어서 이 데이터가 필요하면 리페칭할 수 밖에 없다.
그런데 썩지 않았어도 cacheTime이 짧으면 데이터가 사라지므로 리페칭할 수 밖에 없다.
•
cacheTime(5분)
•
0이니 항상 데이터는 썩어있다. 그러니 캐싱이 안된다는 얘기다.
useQuery
첫 번째 인자에 unique key가 들어간다. refetching, caching, query 공유 용도다.
다시 같은 데이터를 요청하지 않기 위해서다. key가 달라지면 리페칭한다.
두 번째 인자에 resolve나 error를 처리하는 Promise를 리턴하는 함수를 넣는다.
axios는 200이 아닌 응답에 에러가 발생하므로 별다른 처리를 하지 않아도 된다. fetch는 일일이 throw new Error()해야 한다.
데이터 리프레쉬
query 키가 변하지 않지만 변경이 있어 강제 리프레쉬할 때
queryClient.invalidateQueries(’’);
