Graphql mutation

mutation

만들기

graphql mutation 의 key: value 값은 백엔드 개발자가 어떻게 만드느냐에 따라 달라진다.

import { useMutation, gql } from '@apollo/client'
// useMutation과 gql 받아오기

const CREATE_BOARD = gql`
	mutation { createBoard($writer:String, $title:String, $contents:String)
		createBoard(
			writer: $writer,
			title: $title,
			contents: $contents
		){
			_id
			number
			message
		}
	}
` //createBoard 참고해서 작성

갑자기 복잡해졌다. 뭔가 많아졌다. 사실 처음부터 코드가 저랬던 건 아니다.

const CREATE_BOARD = gql`
	mutation {
		createBoard(
			writer: "죠르디",
			title: "기프티콘 팝니다",
			contents: "한 번만 썼어요"
		){
			_id
			number
			message
		}
	}
`

원래는 이렇게 작성된 코드였는데 이렇게 되면 게시글을 쓸 때 값이 항상 똑같다. 맨날 죠르디가 한 번 쓴 기프티콘을 파는 글만 작성되는 것이다. 그부분을 피하기 위해서 위와 같은 코드를 작성해 준다.

실행하기

전송한 데이터를 변수에 담아주자. 이때 async와 await를 사용해서 동기식으로 처리하게 만들어주는 것도 잊지 말기!

const OnClickSumbit = async () => {
 // 데이터를 변수에 담는 걸 실행해줄 함수
      const result = await createBoard({ 
        variables: { 
          writer: writer, 
          title: title, 
          contents: contents
        } // result에 담을 데이터
      })
      console.log(result) // 데이터가 담긴 result 출력

try 그리고 catch

백엔드에 요청을 보내는 것이기 때문에 백엔드 서버에 문제가 있거나 종료가 되어있을 경우 실행이 되지 않을 수가 있다. 그렇기 때문에 mutation 실행 시 성공할 경우와 실패할 경우에 대한 상황을 나누어서 적어준다.

const OnClickSumbit = async () => {
  try { // 성공시 결과 적어주기
        const result = await createBoard({
          variables: {
              writer: writer,
              title: title,
              contents: contents
          }
        })
  } catch(error) {
    console.log(error.message) // 실패 시 에러 메세지 출력(백엔드 컴퓨터)
  } finally {
      // try의 결과와 상관없이 무조건 실행되는 부분으로 주로 로그 수집을 위해 쓰인다.
      // 생략할 수 있다.
  }
}