React-query useMutation 간단히 사용해보고 정리

개요

서버 상태 관리 라이브러리로 React-query를 사용하면서 서버에서 받은 데이터를 캐싱, 로딩 상태 관리 등 많은 기능을 사용할 수 있다는 것을 느꼈습니다. 여기서 특정 기능을 구현하기 위해 서버에서 데이터를 받을 때 뿐만 아니라 서버로 데이터를 보낼때도 사용할 수 있는지 찾아봤고 useMutation을 사용하면 된다는 것을 확인해보고 사용해봤습니다.

 

 

코드

 

import React from 'react';

const Button: React.FC = ({
  nickname,
  setIsChecked,
}) => {
  const {
    data,
    mutate,
    isLoading,
    isError,
    error,
    isSuccess,
  } = useMutation(ValidationApi);
  
  // or 
  
   const validMutation = useMutation(ValidationApi);

  const handleClick = () => {
    mutate(nickname); // mutate는 서버로 데이터를 보내는 trigger
  };

  return (
    <button
      type="button"
      onClick={handleClick}
    />
  );
};

export default Button

 

https://tanstack.com/query/v4/docs/reference/useMutation

useMutation | TanStack Query Docs

전송시 설정할 수 있는 option과 서버로 데이터를 보내는 작업을 수행할 때 return state를 확인할 수 있습니다

 

참고

 

https://jforj.tistory.com/244

[React] React Query의 useMutation에 대해 알아보기