useMutation

Kimu·2021년 9월 9일
2
post-thumbnail

사실 이것을 먼저 포스팅했어야 했는지도 모르겠다.
좀 전의 useQuery를 먼저 포스팅한 이유는 그 다름이 특이해서였다.
썸네일 뭐냐구? 생각하는 고양이다. ㅎㅎ

1. mutation 요청문 gql

export const DELETE_BOARD = gql`
  mutation deleteBoard($boardId: ID!) {
    deleteBoard(boardId: $boardId)
  }
`

쿼리문을 보면 이렇게 생겼다. 읽어보면 알겠지만 게시판의 글을 삭제해달라는 api요청문이다. 글을 삭제하려는 요청에서 필수로 전달해야 하는 정보는 글의 id이다. id는 어디서 받아요? 아까 요청했던 useQuery문에서 받아오던가 아니면 useRouter에서 받아올 수 있다. 라우터에서 받아올 수 있는 이유는 id는 고유한 값으로써 게시글의 주소로 쓰이기 때문이다. 이렇게 쓰다보니 useRouter에 대해서도 포스팅을 써야겠네 싶다. (...끝이 없잖아?)

2. useMutation요청의 실행
아래의 함수 onClickDelete는 이름대로 클릭하면 삭제한다는 함수이다. 이 함수는 async, await이 걸려있으므로 try, catch로 감싸준다. 동기적으로 수행해야하는 함수는 혹시라도 서버에러, 네트워크에러, 기타 에러로 데이터가 수행되지 않을 때를 대비해주어야하기 때문이다. 아까와는 달리 얘는 버튼을 클릭해야 그 안에서 실행되므로, 이렇게 동기적으로! 정의한다. 유즈쿼리는 실행문이 따로 없고 정의되면서 바로 실행되나, 뮤테이션은 이렇게 실행문이 따로 존재함을 잊지말자. 그리고 실행될 때 이렇게 에이싱크, 어웨잇을 써서 동기적으로 사용한다.

import { useMutation } from "@apollo/client";
 const [deleteBoard] = useMutation(DELETE_BOARD);
 async function onClickDelete() {
    try {
      await deleteBoard({ variables: { boardId: router.query.boardId } });
      alert("게시물이 삭제되었습니다.");
      router.push("/boards");
    } catch (error) {
      alert(error.message);
    }
  }

3. 뮤테이션의 리턴값
이렇게 보니 다른 점이 보이는 유즈뮤테이션. 대괄호로 감싼 것을 보면 useMutation()이 리턴하는 값은 배열에 담겨온다. useQuery는 중괄호였던 것이 기억나는가? 걔는 객체로 값을 리턴했기 때문이다.

정리하면, useQuery와 useMutation은 반환값 (객체 vs 배열), 실행시점(선언될 때 vs 동기적)이 다르다.

profile
지속가능한 개발자

1개의 댓글

comment-user-thumbnail
2022년 7월 23일

감사합니다 ! 공부에 큰 도움이 되었습니다 ㅠㅠㅠ

답글 달기