기능
- 서버 데이터 캐시를 관리
- 서버 데이터 필요시 fetch, axios가 아닌 React Query 캐시 요청
- 클라이언트 구성에 따라 해당 캐시를 유지 관리
- 클라이언트 캐시 데이터와 서버 데이터 비교
- 명령형 처리 - 쿼리 클라이언트에 데이터 무효화 하고 캐시를 교체할 새 데이터 서버에서 가져옴
- 선언형 처리 - refatch를 트리거 하는 조건 구성
- 서버에 대한 모든 쿼리의 로딩 및 오류 상태 유지 시켜줌
- Prefetch - 페이지네이션, 무한스크롤에 따른 데이터를 조각으로 가져올 수 있는 기능
- 중복 요청 제거
- 서버 오류시 재시도 관리
- 쿼리 성공 오류시 조치할 수 있는 콜백 전달
- 문제상황
게시글 클릭시 기존 댓글에 대한 캐시가 남아있어 댓글 내용이 쌓인다.
- 해결책 - 게시물에 대한 쿼리에 라벨을 설정
- query key를 배열로 전달
[’comments’, post.id]
- ⇒ 쿼리키를 쿼리에 의존성 배열로 취급 ⇒ post.id가 업데이트 되면 새로운 쿼리 생성, 의존생 배열이 다르다면 완전히 다른 쿼리로 인식함
- 개발자 도구 확인시 기존 쿼리는 비활성화 되고 캐시에서 지워지지는 않음 - 캐시시간 만료되면 캐시에서 제거됨
Prefetching
- 캐시를 추가하여 미리 fetching 해오게 하는 기능
useEffect(() => {
if (currentPage < maxPostPage) {
const nextPage = currentPage + 1
queryClient.prefetchQuery(['posts', nextPage], () => fetchPosts(nextPage), {
staleTime: 2000,
// 이전 페이지로 돌아갔을 때 캐시에 해당 지난 데이터가 있도록
keepPreviousData: true
})
}
}, [currentPage, queryClient])
useMutation
- mutation함수 반환, 쿼리키X
- isFeching 없음
- useQuery는 데이터 fetching 실패시 retry 3번이 있지만 mutation디폴트값은 retry가 없고 따로 설정 해야 함
const deleteMutation = useMutation((postId) => deletePost(postId))
{deleteMutation.isError && <p style={{ color: 'red' }}>Error deleting the post</p>}
{deleteMutation.isLoading && <p style={{ color: 'purple' }}>deleting the post</p>}
{deleteMutation.isSuccess && <p style={{ color: 'green' }}>Post has (not) been deleted</p>}
<button onClick={deleteMutation.mutate(post.id)}>Delete</button>