React(84) React-Query - useMutation 적용하기

 

 

 

React-Query 를 사용하여 HTTP 통신 방식에서 create 와 update, delete 를 하기 위해서는 useMutation() 을 사용해야 한다.

이미 실무에서는 내부 api용 라이브러리와 커스텀 훅을 만들어 useMutation 을 사용하고 있지만,

가장 기본적인 사용법을 이해하고자 포스팅을 올려본다.

 

 

Get 방식으로 React-Query 를 어떻게 사용하는지 궁금하시다면? (아래 포스팅 클릭 ↓↓↓)

React(85) React-Query - useQuery 적용하기

 

---

React(84) React-Query - useMutation 적용하기

 

 

useMutation 이란

useMutation 은 3가지 매개변수를 받는다.

useMutation(key, function, options) 요렇게 인자 3개를 받는다
	      ↑      ↑        ↑
            쿼리키  api호출함수  쿼리옵션

 

 

내부 타입 코드를 보며 조금 더 deep하게 살펴보자

export declare function useMutation<
  TData = unknown, TError = unknown, TVariables = void, TContext = unknown // 얘네를 리턴타입으로 받고
> (
  mutationKey: MutationKey, 			    // 데이터 캐싱할 키,
  mutationFn?: MutationFunction<TData, TVariables>, // 통신할 쿼리 함수
  options?: Omit< 				    // 쿼리 옵션들 (다양한 옵션들을 골라골라 사용하자)
    UseMutationOptions<TData, TError, TVariables, TContext>, 
    'mutationKey' | 'mutationFn'
  >
): UseMutationResult<TData, TError, TVariables, TContext>;

 

 

 

useMutation 매개변수

newPost 라는 api 통신함수를 React-query 를 적용해서 사용하려고 한다.

자, useMutation 에 들어갈 매개변수를 준비해보자

 

 

mutationKey

문자열 또는 배열로 지정할 수 있다. 

→ newPost 이니 'newPost' 라는 키 값으로 결 - 정 !

 

 

mutationFn

서버와 통신할 promise 처리가 이루어지는 api 함수를 의미한다 (axios를 이용해 서버에 API 요청)

→ api 통신함수 좀 만들어 줘야지

 

** promise 기반의 axios 방식으로 통신을 하는 경우, try catch 문을 사용해 에러핸들링을 했다.

react-query 는 옵션을 사용해 에러핸들링을 한다. 어떻게 하는지는 아래에서 살펴보자

export async function newPost(post: Post): Promise<Post> {

    const res = await http.post(
       `${API_ADDRESS}/post`, post  	 // api 와 body에 담길 데이터(post)를 보내주자
    );
    
    if (res.status !== 200) { 		 // 네트워크 에러시 에러핸들링
      throw new Error(`Response status is "${res.status}"`);
    }

    if (res.data.resultCode !== '0200') { // 네트워크 에러시 에러핸들링
      throw new Error(`ResultCode is "${res.data.resultCode}"`);
    }
    
    return null; // 생성만 하는 api라 결과값은 따로 없다
}

 

options

다양한 옵션들을 사용해 부가적인 기능들을 사용할 수 있다.

→ try catch 문을 대신해 onSuccess, onError, onSettled 옵션을 사용해야겠다.

→ 예를 들어 onError 옵션은 요청실패시 에러 핸들러를 넘기게 되고 네트워크 요청이 실패했을 때 자동으로 콜백을 실행 시켜준다.

 {
  onSuccess: () => {		// 요청 성공시 실행
    alert('글이 저장되었습니다.');
  },
  onError: err => {		// 요청 실패시 실행
    alert('글을 저장하지 못했습니다.')
  },
  onSettled: () => {
    alert('요청이 실행되었습니다.'); // 성공실패 관계없이 실행
  },
}

 

 

 

useMutation  적용하기

 

자, 위에서 모아놓은 준비물들 가지고 컴포넌트 내부에서 선언해보자

import { useMutation } from "react-query"; // 임포트해오기

 

 

useMutation 을 사용해서 newPost 를 선언해놓고, ( 자 언제든 출격할 수 있도록 대기해라 )

const newPost = useMutation(
  'newPost', 		// 키
  async params => { 	// api 함수
    await newPost(post)
  },
  {			// 옵션
    onError: err => { alert('글을 저장하지 못했습니다.'); },
    onSuccess: () => { alert('글이 저장되었습니다.'); },
    onSettled: () => { alert('요청이 실행되었습니다.'); },
  }
  );

 

 

사용할 때는 요렇게 mutate로 useMutation 을 호출하면 된다

newPost.mutate(post);
newPost.mutateAsync(post); // async await 으로 useMutation 의 통신함수를 선언시 순서를 보장하려면