prefetchQuery와 invalidateQueries

회사 프로젝트에서 react query를 도입했다가

이전 코드를 보는데 갑자기

queryClient.prefetchQuery와 queryClient.invalidateQueries의 사용방법의 차이가 헷갈렸다. ㅋㅋㅋ

queryClient.prefetchQuery는 queryFn을 받는다.

const queryClient = useQueryClient();

queryClient.prefetchQuery({
	queryKey: ['todo',1],
    queryFn: ()=> 내가 ['todo',1] 쿼리에 캐싱하고 싶은 데이터
})

위처럼 prefetchQuery를 사용하면 쿼리키가 ['todo',1]인 쿼리의 캐시데이터를 queryFn의 리턴값으로 임의로 설정할 수 있다.

또한, 쿼리키가 ['todo']인 쿼리를 prefetch 했다고 해서 ['todo','1']에도 데이터가 프리패치되지는 않는다.

queryClinet.invalidateQueries는 queryKey만 받는다.

const queryClient = useQueryClient();

queryClient.invalidateQueries({
	queryKey: ['todo']
})

반면에 invalidateQueries는 기존 query의 상태만 변경하는 함수이기때문에 queryFn이 없다.
또, querykey 인자로 ['todo']만 적용하면 'todo' 키를 가지고 있는 모든 쿼리가 invalidate 상태가 된다.