[TIL] react query - useMutation

0. 주제 선정하게 된 배경 :

영화 프로젝트 리팩토링 작업중에 useMutation로 개선하면 좋은 곳이 있어서
적용해보면서 공부를 해보려고 한다.
이전에 정리한 react query, useQuery에 이어서 진행...!

1. 제대로 알고 넘어가기 :

1-1. useMutation을 쓰는 이유는 뭘까?

: fetch나 axios로 POST, PUT, DELETE 요청 등을 보낼 수 있는데,
useMutation으로 업데이트 하는 이유가 궁금했음

1. 간편한 사용 : 코드가 간결하기 때문에 유지 보수 용이
2. ⭐️상태 관리 : fetch는 요청에 대한 상태를 관리하려면 따로 추가적인 코드가 필요한데,
   useMutation은 요청의 상태(요청 진행중, 성공, 실패...) 정보를 쉽게 얻을 수 있음
3. 자동 재요청 및 캐싱 : 요청이 실패했을때 자동으로 재요청할 수 있고, 요청 결과를 자동으로 캐싱해줌
4. ⭐️쉬운 에러 처리

[fetch 예시]

const [loading, setLoading] = useState(false); // 상태 관리를 위한 추가적인 코드 작성1
const [error, setError] = useState(null); // 상태 관리를 위한 추가적인 코드 작성2

const exampleComponent = () => {
	const fetchData = async () => {
  	setLoading(true);
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      // 요청 성공
      setLoading(false);
      // 성공한 데이터를 처리
    } catch (error) {
      // 요청 실패
      setLoading(false);
      setError(error.message);
    }
  };

return (
  <div>
    {loading && <p>Loading...</p>}
    {error && <p>Error: {error}</p>}
    {/* 데이터 표시 */}
  </div>
);
}

[useMutation 예시]

import { useMutation } from 'react-query';

const submitSomethingMutate = useMutation({
    	mutationFn : (data) => { // ====> 매개변수는 여기에 ⭐️
        	// 저장하는 내용
            return 결과
        },
        onSuccess: () => {
        	// 성공했을 때
        },
        onSuccess: () => {
        	// 실패했을 때
        }
    });
    
const handleSubmit = () => {
	submitSomethingMutate.mutate({/* 전달할 데이터 */})
}
return (
    <form onSubmit={handleSubmit}>
    	...
      <button type="submit" disabled={mutation.isLoading}>
        {mutation.isLoading ? 'Creating...' : 'Create User'}
      </button>
    </form>
  );
};

export default CreateUserForm;

1-2. 사용법

1-2-1. 커스텀 훅 파일 생성

: useMutation을 반환해주는 커스텀 훅을 만들어서 로직을 분리해주는게 좋음

// useSaveSampleListMutation.js

export const useSaveSampleListMutation = () => {
	return useMutation({
    	mutationFn : (data) => { // ====> 매개변수는 여기에 ⭐️
        	// 저장하는 내용
            return 결과
        },
        onSuccess: () => {
        	// 성공했을 때
        },
        onSuccess: () => {
        	// 실패했을 때
        }
    })
}

1-2-2. 커스텀 훅 사용

const saveSampleMutate = useSaveSampleListMutation();

// 필요한곳에서 saveSampleMutate를 사용
saveSampleMutate.mutate({data}) // =====> 인수는 여기에서 전달 ⭐️

2. 적용해보기

36da1c4051393da94f8d5ccb99c697a402c33c85

3. 챗지피티를 활용하여 대화식으로 학습한 내용 :

https://chat.openai.com/share/342b830b-8448-499e-940f-76d2086ee507

4. mutate, mutateAsync 더 공부해보기