apollo-client에 사용자 입력값 보내주기 실습 및 스코프체인

graphql mutation을 실행하려는 페이지 상단에서, apollo-client의 도구들을 불러옵니다.

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

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

// graphql 코드 생성
const CREATE_BOARD = gql`
	mutation {
		createBoard(
			writer: "훈이",
			password: "1234",
			title: "안녕하세요 훈이에요",
			contents: "반갑습니다"
		){
			message
		}
	}
`

gql 변수/상수를 활용하여, useMutation을 만들어 줍니다.

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

게시물 등록 버튼을 클릭했을 때 실행되는 함수에서 mutation 코드를 실행해 줍니다.

function handleClickPost(){

	createBoard({
			variables: {
					aaa: "훈이",
					bbb: "1234",
					ccc: "안녕하세요 훈이에요",
					ddd: "반갑습니다"
			}
	})
	return (
		<button onClick={handleClickPost}>게시물 등록</button>
	)
}

위 코드는 항상 같은 게시물이 등록된다는 문제점이 있습니다.

CREATE_BOARD 부분이 변경될 필요가 있습니다.

graphql 변경후

const CREATE_BOARD = gql `
	mutation zzzz($aaa: String, $bbb: String, $ccc: String, $ddd: String) {
    	createBoard(
        	writer:$aaa,
            password: $bbb,
            title: $ccc,
            contents: $ddd
          ){
          	message
           }
       }
   `

mutation 변경후

function handleClickPost(){

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

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

 

여기서, 들어가는 데이터를 고정된 값에서 state로 변경하면! 최종적인 코드가 완성됩니다!

 

graphql 뮤테이션에 async / await 적용

rest-API 또는 graphql-API 를 사용해서 해야할 일은 요청에 대한 응답으로 받은 객체(JSON)를 변수에 담아서 사용하는 것입니다.

여기서! 응답 결과를 변수에 담아서 사용하려면! 통신이 완료될 때까지 기다려야 합니다!

async / await 를 활용해 보겠습니다.

// mutation에 동기식 처리
async function handleClickPost(){

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

		// 결과물 확인하기
		console.log(result)

}

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

기본 형식은 이렇게 됩니다, 화살표 함수로 사용 할때는 async 의 위치를 () 앞에 입력해야합니다.

// 비동기 통신
function 함수명() {
	// 서버에 요청하는 코드
}


// 동기 통신
async function 함수명
() {
	await // 서버에 요청하는 코드
}
--------------------------------------------------------------------------------
// 화살표 함수의 경우
const 함수명 = async () => {
	await // 서버에 요청하는 코드
}