[React Query] useMutation

useMutation

query와 달리 mutation은 일반적으로 데이터를 CREATE/UPDATE/DELETE 하거나 서버 부작용을 수행하는데 사용된다.

서버 데이터를 가져오는 것은 reactive하게 동작하는 useQuery를 사용하면 되지만, 서버 데이터를 업데이트하고 생성하고 삭제하는 것은 적절하지 않다.

useQuery처럼 onSuccess, onError, onSettled 콜백을 전달할 수 있으며 mutate를 호출했을 때 실행할 onMutate 콜백도 사용할 수 있다.

useQuery와 마찬가지로 많은 옵션을 제공하지만 너무 많다. 자세한 내용은 공식문서를 참조하자

const { data, isLoading, mutate, mutateAsync } = useMutation(mutationFn, options);

mutate(variables, {
  onError,
  onSettled,
  onSuccess,
});

Options

• mutationFn: (variables: TVariables) ⇒ Promise<TData>
  • 필수값이며, 비동기 작업을 수행하고 Promise를 반환하는 함수이다.
  • variables는 mutate가 전달하는 객체이다.
• onMutate
  • mutationFn이 실행되기 전에 실행되고 mutationFn가 받을 동일한 변수가 전달된다.
• onSuccess
  • mutation이 성공하고 결과를 전달할 때 실행된다.
• onError
  • mutation이 실패했을때 실행된다.

Returns

• mutate: (variables: TVariables, {onSuccess, onSettled, onError}) ⇒ void
  • mutation을 실행시키는 함수이다.
  • variables는 matationFn에 전달하는 객체이다.
  • mutate에서도 onMutate, onSuccess, onError를 쓸수있다.
    • 다만 순서상 useMutation의 옵션 콜백이 먼저 실행되고 mutate의 옵션 콜백이 실행된다. 따라서 컴포넌트가 unmount되면 옵션 콜백이 실행되지 않는다.
• mutateAsync
  • mutate와 비슷하나, promise를 반환한다.

쿼리 무효화(Invalidation)

쿼리 데이터가 stale 상태로 바뀌기를 기다릴 수만은 없는 경우가 있다. 예를 들어 게시글에 댓글을 작성한 후에는 서버에서 댓글 목록을 다시 가져올 필요가 있다. 이와 같은 경우에는 지정한 staleTime이 지나기 전에 직접 쿼리를 무효화해서 데이터를 새로 가져오도록 해야 한다.

const queryClient = useQueryClient();

// 캐시에 있는 모든 쿼리를 무효화한다.
queryClient.invalidateQueries()

// posts로 시작하는 모든 쿼리를 무효화한다. ex) ['posts', 1], ['todos', 2], ...
queryClient.invalidateQueries('posts')

// ['todos', 1] 키를 가진 쿼리를 무효화한다.
queryClient.invalidateQueries(['posts', 1])