[React-Query] staleTime과 mutation

react-query는 서버에서 받아온 정보들을 캐싱해두었다가 사용할 때 아주 유용하다.
하지만 특별한 설정을 하지 않는다면 기본적으로 데이터가 변경되었을때, 윈도우에 다시 포커스 되었을 때(화면 전환), 네트워크가 다시 연결되었을 때 다시 정보를 받아오게 된다.

우리는 새로운 정보를 받아왔을 때만 정보를 다시 받아오는 것을 원하는데 react-query는 너무 많은 일을 해주는 것이다.

그때 필요한 것이 바로 staleTime이다.
이것을 설정해두면 그 시간동안은 캐싱된 데이터를 사용한다.

staleTime

const {isLoading, error, data} = useQuery(['user'], () => getUser(), {staleTime: 1000 * 60 * 5});

staleTime은 ms(밀리세컨즈)단위이고 공식 문서에서는 5분정도 설정해두는 것이 적절하다고 보고있다.

그렇다면 정보가 변경되면 어떻게 알 수 있을까?
mutation을 사용하면 된다!

Mutation

const queryClient = useQueryClient();

const setUser = useMutation(() => setUser(), {
	onSuccess: () => queryClient.invalidateQueries(['user'])
})

const handleClick = () => {
	setUser.mutate({
    	onSuccess: () => {alert('성공적으로 추가했습니다.')}
    })
}

mutation을 사용하기 위해서는 queryClient를 선언한 후
이벤트 발생시 동작시킬 함수를 useMutation안에 넣는다. 또한 onSuccess를 통해 동작이 성공적으로 진행되었을 때의 함수를 넣어줄 수 있는데
여기에 queryClient의 invalidateQueries를 불러 원하는 쿼리키의 데이터를 무력화시켜준다.
이후 해당 객체의 mutate를 불러주면 된다.