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

개발일기·2022년 1월 13일
0

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를 사용해 결과를 받아올때까지 기다리게 되면 결과값은 아래와 같이 달리 나타내준다.

profile
개발자가 꿈이에오

0개의 댓글

Powered by GraphCDN, the GraphQL CDN