[Tanstack Query] useMutation과 invalidateQuries 그리고 refetchQuries

데이터 CRUD에서 useQuery는 C를, useMutation은 RUD를 맡는다. 이 글에서는 간단한 useMutation의 사용법과 데이터를 갱신하는 메서드 invalidateQueries와 refetchQueries에 대해 알아본다.

invalidateQueries란?

invalidateQueries는 캐시된 쿼리를 무효화하여 해당 쿼리를 stale 상태로 만들고, 다음에 쿼리가 사용될 때 데이터를 다시 가져오도록 하는 함수다. 이를 통해 변경된 데이터를 즉시 반영할 수 있다.

사용법 예제

import { useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient();

// 원하는 시점에 쿼리 무효화
queryClient.invalidateQueries({ queryKey: ['posts'] });

useMutation과 invalidateQueries 함께 사용하기

데이터를 추가, 수정, 삭제할 때 useMutation을 사용하며, 성공적으로 완료되면 invalidateQueries를 호출하여 데이터를 최신 상태로 유지할 수 있다.

예제

import { useMutation, useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

const uploadPostMutation = useMutation({
  mutationFn: (newPost) => uploadPost(newPost),
  onSuccess: () => {
    // 'posts' 쿼리를 무효화하여 최신 데이터를 가져온다.
    queryClient.invalidateQueries({ queryKey: ['posts'] });
  },
});

const handleUploadPost = (newPost) => {
  uploadPostMutation.mutate(newPost, {
    onSuccess: () => {
      toast('포스트가 성공적으로 업로드 되었습니다!');
    },
  });
};

useMutation의 콜백 옵션

useMutation에는 다양한 콜백 옵션이 있다:

• onMutate: 변이가 시작될 때 호출
• onSuccess: 변이가 성공적으로 완료되었을 때 호출
• onError: 변이가 실패했을 때 호출
• onSettled: 변이 작업이 끝났을 때 호출 (성공/실패 상관없이)

예제

const uploadPostMutation = useMutation({
  mutationFn: (newPost) => uploadPost(newPost),
  onSuccess: () => {
    console.log('onSuccess in useMutation');
  },
  onSettled: () => {
    console.log('onSettled in useMutation');
  },
});

// mutate 함수에서 추가적인 콜백 사용
uploadPostMutation.mutate(newPost, {
  onSuccess: () => {
    console.log('onSuccess in mutate');
  },
  onSettled: () => {
    console.log('onSettled in mutate');
  },
});

콜백 함수의 실행 시점

• useMutation에 등록된 콜백 함수들은 컴포넌트가 언마운트되어도 실행된다.
• mutate 함수의 콜백 함수들은 컴포넌트가 언마운트되면 실행되지 않는다.

따라서 중요한 로직은 useMutation 콜백에, 컴포넌트에 종속적인 로직은 mutate 콜백에 등록한다.

isPending 프로퍼티 활용

useMutation에는 isPending 프로퍼티가 있어, 변이가 진행 중인지를 확인할 수 있다. 이를 사용해 중복 업로드를 방지할 수 있다.

예제

const uploadPostMutation = useMutation({
  mutationFn: (newPost) => uploadPost(newPost),
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] });
  },
});

// ...

<button
  disabled={uploadPostMutation.isPending || !content}
  type='submit'
>
  업로드
</button>

invalidateQueries와 refetchQueries의 차이

• invalidateQueries:

  • 특정 쿼리를 무효화하여 다음에 해당 쿼리가 사용될 때 데이터를 다시 가져오도록 한다.
  • 쿼리를 무효화하지만, 데이터를 바로 다시 가져오지는 않는다. 성능 최적화를 위해 사용된다.

• refetchQueries:

  • 특정 쿼리를 즉시 다시 가져오도록 강제한다.
  • 데이터를 바로 갱신해야 할 때 사용된다.

예제 비교

// invalidateQueries 사용 예제
queryClient.invalidateQueries('todos');

// refetchQueries 사용 예제
queryClient.refetchQueries('todos');

정리

• invalidateQueries: 캐시된 쿼리를 무효화하여 데이터를 다시 가져오도록 함. 다음에 해당 쿼리가 필요할 때 데이터를 다시 가져옴.
• refetchQueries: 특정 쿼리를 즉시 다시 가져옴. 데이터를 바로 갱신해야 할 때 사용.

이 두 함수는 데이터 갱신을 효율적으로 관리하는 데 도움을 주며, 상황에 맞게 적절히 선택하여 사용하면 된다. useMutation과 함께 사용하면 데이터 변경 후 최신 상태를 유지할 수 있으며, 이를 통해 사용자 경험을 향상시킬 수 있다.