공부기록

[GraphQL] 가지고 놀아보기 #1 본문

GraphQL

[GraphQL] 가지고 놀아보기 #1

gracelove91 2019. 12. 14. 21:22
반응형

GraphQL 가지고 놀아보기

GraphQL 공용 API

GraphQL 공용 API를 이용해 놀아보자 여기서는 http://snowtooth.moonhighway.com 과 통신을 해보도록하자.

먼저 GraphQL Playground를 다운로드 혹은 접속해보자

mac에서 설치

  • brew cask install graphql-playground

온라인으로 즐기기

  • http://snowtooth.moonhighway.com

데이터 요청과 응답.

  • 요청데이터에 다음과 같이 넣고 가운데 버튼을 눌러보자 그럼 다음과 같은 화면이 뜬다. 왼쪽은 요청데이터고 오른쪽은 응답데이터다
  • 작업은 한 번에 한 쿼리에 대해서만 실행된다. 두 개의 쿼리를 한번에 얻고싶다면 다음과 같이 작성하자 쿼리 한 번에 여러 종류의 데이터를 모두 받을 수 있다.

query

  • GraphQL의 타입이다. 루트타입이라고도 한다. "타입 1개 == 작업 1개" query에 사용할 수 있는 필드는 API스키마에 정의한다. 오른쪽에 있는 'DOCS' 탭을 보자.
  • 쿼리 작성 시에 필요한 필드를 중괄호로 감싼다 query { ... } 이 블록을 셀렉션 세트 라고 한다. allLifts,allTrails는 모두 query 타입 안에 정의되어있다.
  • 셀렉션 세트는 위 사진처럼 서로 중첩시킬 수 있다.
  • 응답 데이터는 쿼리의 형태와 똑같은 모양을 한다. 각각 JSON 필드명은 쿼리의 필드명과 동일하다. 필드명을 바꾸고 싶다면 다음과 같이 별칭을 부여하자.
  • 쿼리 결과에 대한 필터링을 하고싶다면 쿼리인자 를 다음과 같이 넘기자.
  • 데이터를 선택하는 용도로도 다음과같이 쿼리인자를 사용할 수 있다.

프래그먼트

  • 셀렉션 세트의 일종이며, 재사용이 가능하다. 프래그먼트를 이용해 중복을 제거해보자.

  • 중복제거 전 data

    name, status, capacity, night, elevationGain 가 중복되는 걸 볼 수 있다.

  • 중복된 코드는 Lift타입이다. 프래그먼트는 fragment 식별자를 사용해 만든다. 프래그먼트란 특정 타입에 대한 셀렉션 세트이므로 어떤 타입에 대한 프래그먼트인지 정의해줘야 한다. 다음과 같이 작성하자.

반응형

'GraphQL' 카테고리의 다른 글

[GraphQL] GraphQL 개요  (0) 2019.12.14