코드캠프 부트캠프 4일차-2

rest-api의 경우에는 CRUD(Create, Update, Delete, Read)를 하기 위해서 각 명령어를 Post, Put, Delete, Get을 사용한다.
graphql-api의 경우에는 CUD(Create, Update, Delete)를 하기 위해선 Mutation을 사용하며 조회(Read)의 경우에는 Query를 사용한다.

graphql을 vscode에서 사용을 하기 위해서는 apollo-client라는 도구가 필요하다.
apollo-client를 설치한 후, 사용하기 위해 처음 1번 셋팅이 필요한데 일반적인 위치는 _apps.js 이다.

apollo-client로 graphql 뮤테이션 실행

1. 우선 mutation을 사용하기 전, playground에서 우리가 사용하려는 mutation이 제대로 작동하는지 확인한다.
   
2. 만약, 제대로 작동한다면, graphql mutation을 실행하려는 페이지 상단에서, apollo-client의 도구들을 불러온다.
   
3. Javascript 입력 부분에 playground의 코드를 복사하여 아래와 같이 gql'' 사이에 붙여넣어 변수/상수를 만들어 준다. 여기서 ''는 백틱이다. 백틱은 키보드 숫자1 왼쪽에 있는 물결표 표시가 있는 버튼이다.
   
   위의 CREATE_BOARD를 대문자로 만든 것은 관례이다.
   4. 위에서 만든 gql 변수/상수를 활용하여, useMutation을 만들어 준다.
   
   5. 게시물 등록 버튼을 클릭했을때 실행되는 함수에서 mutation 코드를 실행시킨다.
   
   6. 게시물이 정상적으로 등록되는지 확인해준다.
   
   

graphql 뮤테이션에 async / await 적용

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

여기서 응답 결과를 변수에 담아서 사용하려면 통신이 완료될때까지 기다려야 하므로,
async / await를 활용해야한다.

다음은 화살표 함수로 사용할때

비동기 통신과 동기 통신은 await의 유무로 나뉘게 된다.

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