react query를 사용한 낙관적 업데이트

const { mutate: toggleListLikeMutate } = useMutation({
    mutationKey: ['toggleListLikeArticle'],
    retry: false,
    mutationFn: toggleLikeArticle,
		...
})

onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['getArticleList'] });
},

-> 좋아요 클릭
-> 서버에 요청
-> 서버 응답
-> 서버 데이터로 쿼리를 다시 갱신
-> 클라이언트 UI 변화 (좋아요 수 : 1 , 좋아요 X → 좋아요 수 : 2 , 좋아요 O)

-> 좋아요 클릭
-> 서버에 요청
-> 클라이언트 UI 변화 (좋아요 수 : 1 , 좋아요 X → 좋아요 수 : 2 , 좋아요 O)
-> 서버 응답
-> 실제 서버 데이터로 쿼리를 다시 갱신

const { mutateAsync: toggleLikeMutate } = useMutation({
    mutationKey: ['toggleLikeArticle'],
    retry: false,
    mutationFn: toggleLikeArticle,
    onMutate: async id => {
			// 상세 쿼리를 취소한다. (낙관적 업데이트가 덮어쓰지 않도록)
      await queryClient.cancelQueries({ queryKey: ['getArticle', id] });
 
      const previousArticle = queryClient.getQueryData<
        ApiResponse<ListArticle>
      >(['getArticle', id]);
 
      // 쿼리 데이터에 대하여 좋아요 상태를 업데이트한다.
      const uploadArticle = produce(previousArticle, draft => {
        const article = draft?.data;
        if (article) {
          article.isLiked = !article?.isLiked;
          article.likeCount += article?.isLiked ? 1 : -1;
        }
      });
 
      // 쿼리 데이터를 낙관적 업데이트한다.
      queryClient.setQueryData(['getArticle', id], uploadArticle);
 
      return { previousArticle, id };
    },
    onError: (err, _, context) => {
			// 에러 발생시 기존 데이터로 롤백
			queryClient.setQueryData(
		        ['getArticle', context?.id],
		        context?.previousArticle,
		      );
    },
    onSuccess: (err, _, context) => {
			// 성공 시 쿼리 재요청
			queryClient.invalidateQueries({ queryKey: ['getArticle', context?.id] });
    },
  });

onSettled: () => {
      // 응답 시 쿼리 재요청
      queryClient.invalidateQueries({
        queryKey: [
          'getArticleList',
          currentOrderBy,
          currentOrder,
          filter.author,
        ],
      });
    },