apollo-client 세팅하기

playground에서 실습했던 내용의 코드를 vscode에서 적용시키기 위해서는 apollo-client라는 도구가 필요하다. 이를 설치 후, 설치한 도구들을 세팅하는 위치는 일반적으로_app.js다.

위와 같이 세팅을 해주면 사용할 수 있다.

apollo.client로 graphql mutation 실행

1. qraphql mutation을 실행하려는 페이지 상단에 apollo-client의 도구들을 불러온다.

// graphql 요청에 필요한 도구 불러오기
import { useMutation, gql } from '@apollo/client'

2. javascript 입력 부분에 playground의 코드를 복사하여 아래와 같이 gql``사이에 붙여넣어 변수 / 상수를 만들어준다.

// graphql 코드 생성, 대문자로 만드는 것은 관례이다.
const CREATE_BOARD = gql`
	mutation {
		createBoard(
			writer: "훈이",
			password: "1234",
			title: "안녕하세요 훈이에요",
			contents: "반갑습니다"
		){
			message
		}
	}
`

3. 위에서 만든 gql 변수 / 상수를 활용하여, useMutation을 생성.

// mutation 코드 생성
const [createBoard] = useMutation(CREATE_BOARD)

4. 게시물 등록 버튼을 눌렀을 때, 실행되는 함수에서 mutation 코드를 실행한다.

function handleClickPost(){

	createBoard({
			variables: {
					aaa: "훈이",
					bbb: "1234",
					ccc: "안녕하세요 훈이에요",
					ddd: "반갑습니다"
			}
	})

}

return (
	<button onClick={handleClickPost}>게시물 등록</button>
)

5. 게시물이 정상적으로 등록되었는지 확인

등록이 되지만, 항상 같은 게시물이 등록된다는 문제(하드코딩)이 있다.
따라서 위 3번의 CREATE_BOARD의 부분이 변경될 필요가 있다.

즉, graphql에 데이터는 최종적으로 등록하기 버튼을 눌렀을 때, 실행되는 handleClickPost 함수에서 실행되는 mutation 에서 넣어 주어야한다.

6. 그리고 들어가는 데이터를 고정된 값에서 state로 변경하면, 웹에서 입력받은 데이터를 보낼 수 있다.

graphql mutation async / await 적용

rest-API 또는 graphql-API 를 사용해서 해야할 일은 요청에 대한 응답으로 받은 객체(JSON)를 변수에 담아서 사용하는 것이다.
여기서 응답 결과를 변수에 담아서 사용하려면, 통신이 완료될 때까지 기다려야 한다. 그러기 위해async / await를 활용한다.

기본형식은 이렇게 되어있다. 화살표함수를 사용 할때는 async의 위치에 주의!!

비동기 통신과 동기 통신은 await의 유무로 갈린다.

await를 사용해 결과를 받아올때까지 기다리게 되면 결과값은 아래와 같이 달라진다.

graphql 뮤테이션에 try ~ catch 적용

mutation이 항상 성공하는 것은 아니다.
Backend 컴퓨터에 문제가 발생할 수도 있고, 내가 수정하려는 게시물이 갑자기 삭제가 되는 바람에 수정에 문제가 발생하는 등 여러가지 실패 가능성이 있다.
따라서, 우리는 성공에 대한 처리, 실패에 대한 처리를 나누어 작업해야 한다.