예약 서비스를 운영하면서 발생한 에러이다.

예약 취소를 눌렀지만 아무런 반응이 없다. 현재 나는 react query를 사용하고 있었기에 어떤 방법으로 이 문제를 해결할 수 있을 지 알아봤다.

1. InvalidateQueries

위와 같이 코드를 작성하면 ['reservations', user?.uid] 라는 키를 가진 쿼리를 무효화시켜 새로운 데이터를 가져온다.

위와 같이 잘 동작하는 것을 알 수 있다.

2. removeQueries

위의 invalidateQueries는 쿼리를 무효화하고 서버에서 데이터를 새롭게 가져온다면

removeQueries는 서버와의 통신없이 바로 전달받은 키를 가진 쿼리를 삭제한다.

3. setQueryData

만약 위처럼 단순히 삭제작업이 아니라

실시간으로 좋아요 수를 보여주는 어플리케이션이라고 생각해보자.

하트를 눌렀을 때 옆에 있는 전체 좋아요 수도 바로 갱신이 되어야 한다.

그럴때 invalidQueries로 좋아요 수를 받는 쿼리를 새로운 데이터로 초기화시킬 수도 있지만

setQueryData로 서버와의 통신을 기다릴 필요없이 곧바로 사용자에게 변경된 전체 좋아요 수를 보여준다.

이렇게 되면 서버와 클라이언트가 동기화 되어있지 않은 상태지만 사용자경험 측면에서 장점을 가져갈 수 있다.

const queryClient = useQueryClient();

// 전체 좋아요 수를 가져오는 쿼리
const {data : likeCount} = useQuery<number>({
	queryKey : ["likeCount", post.id],
    queryFn : ({ post.id }) => getLikesCount(post.id);
})

const {mutate} = useMutation({
	mutationFn : ({ post.id, user.id }) => addLike(post.id, user.id),
    onSuccess : () => {

    	const previouslikeCount = queryClient.getQueryData(["likeCount", post.id]);
        
    	setQueryData(["likeCount", post.id], likeCount + 1);
     
    }
})

setQueryData(["likeCount", post.id], likeCount + 1);

첫 번째 인수로 쿼리키를, 두 번째 인수로 해당 쿼리의 값을 변경한다.

이 전달받은 쿼리키를 가진 캐시의 값을 바로 업데이트하기 때문에 서버와의 통신을 기다릴 필요가 없다.