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은 클라이언트와 서버 간의 통신명세(스펙)이다
API를 만들 때 사용할 수 있는 쿼리 언어.
실제로 필요한 데이터만 받도록 작성할 수 있다.

GraphQL 설계 원칙

위계적

• 필드 안에 다른 필드가 중첩될 수 있으며, 쿼리와 그에 대한 반환 데이터는 형태가 서로 같다.

제품 중심적

• GraphQL은 클라이언트가 요구하는 데이터와 클라이언트가 지원하는 언어 및 런타임에 맞춰 동작한다.

엄격한 타입 제한

• GraphQL 서버는 GraphQL 타입 시스템을 사용한다. 스키마의 데이터 포인트마다 특정 타입이 명시되며 이를 기초로 유효성 검사를 한다.

클라이언트 맞춤 쿼리

• GraphQL 서버는 클라이언트 쪽에서 받아서 사용할 수 있는 데이터를 제공한다.

인트로스펙티브

• GraphQL 언어를 사용해, GraphQL 서버가 사용하는 타입 시스템에 대한 쿼리를 작성할 수 있다.

REST와의 관계

• 페이스북 개발팀은 REST의 단점을 해결할 새로운 데이터 전송 방식을 만들었다 그것이 바로 GraphQL.

REST의 단점.

• 오버페칭

  응답이 매우 크다. 앱에서 필요한 데이터보다 훨씬 더 많은 데이터를 받아온다. 앱에서는 이름과 나이만 필요한데, 쓸데없는 동호회 정보까지 가져온다

• 언더페칭

  동호회 사이트가 있다고 가정하자. 유저 'GraceLove"가 가입한 동호회 정보들을 가져오고 싶으면 먼저 유저에 대한 정보를 요청 -> 응답값 중 '동호회' 배열에 담긴 각각의 라우트에서 데이터를 가져온다.

    "이름" : "GraceLove",
    "나이" : 29,
    "동호회" : [
        "https://localhost:8080/api/society/1/",
        "https://localhost:8080/api/society/2/",
        ...
    ]

• REST엔드포인트 관리

  REST API는 유연성이 부족하다. 클라이언트에 변경 사항이 생기면 보통 엔드포인트를 새로 만들어야한다.
  하지만 GraphQL의 엔드포인트는 보통 하나로 끝나게 된다. 단일 엔드포인트가 게이트웨이로써의 역할을 한다.