Graphql mutation
mutation
만들기
graphql mutation 의 key: value 값은 백엔드 개발자가 어떻게 만드느냐에 따라 달라진다. 협업할 백엔드 개발자가 없다면 http://example.codebootcamp.co.kr/graphql 을 통해 연습을 하는 것이 도움이 된다.
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의 결과와 상관없이 무조건 실행되는 부분으로 주로 로그 수집을 위해 쓰인다.
// 생략할 수 있다.
}
}
Author And Source
이 문제에 관하여(Graphql mutation), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@imnamesol/Graphql-mutation저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)