이 포스팅은 이전 포스팅인 API 글과 연관되어 있다!
(궁금하면 링크 타고 들어가 보세요~!)
API와 관련된 내용이라 아직 완벽히 숙지를 못했기 때문에...
짧게 포스팅 하고 이후에 내용을 보충할 예정...!

이전 API 글에서 언급한 바와 같이,
자바스크립트는 디폴트 값으로 API를 동기 처리하게 되어 있으며 axios, apollo-client 프레임워크는 비동기 처리하게 되어 있다.

1. async & await 란?

async와 await는 디폴트값으로 설정되어 있는 API 처리 방식을 반대로 바꿔주는 문법이다.
(비슷한 기법으로 setTimeout, callback, promise가 있다)

2. async & await 활용하기

자바스크립트에서는 비동기 처리를 위해서, axios, apollo-client 프레임워크에서는 동기 처리를 위해서
function 앞에 async를 붙여주고 비동기(동기) 처리되는 앞부분에 await를 붙여주면 된다.

[apollo-client 프레임워크에서의 예시]

import {useMutation, gql} from '@apollo/client'

const CREATE_BOARD = gql `
    mutation {
        createBoard(writer:"철수", title:"제목입니다~~", contents:"내용이에요!!!"){
            _id
            number
            message
        }
    }
`

export default function GraphqlMutationPage() {
    const [createBoard] = useMutation(CREATE_BOARD)


    const onClickGraphqlApi = async() => {
        const result = await createBoard()
        console.log(result)
    }

    return (
        <button onClick={onClickGraphqlApi}>GraphQl-API 요쳥하기!</button>
    )
}