GraphQL이란?

1. GraphQL이라는 이름의 유래

GraphQL는 Graph Query Language의 약자입니다. 이것은 SQL(Structured Query Language)과 마찬가지로 질의 언어입니다. 다른 점은,  GraphQL은 클라이언트와 서버 간의 통신 명세라는 것입니다.

 

그래프는 상호 연관 관계에 놓여 있는 객체 집합을 표현할 때 널리 사용합니다.

 

2. GraphQL의 탄생

1. 역사

2012년, 페이스북은 당시 RESTful 서버와 FQL(페이스북의 SQL) 데이터 테이블을 사용하고 있었습니다. 하지만 성능도 별로였고, 앱은 자주 충돌이 났습니다. 결론은 데이터를 클라이언트로 전송하는 방식을 개선해야 한다는 사실을 깨달았습니다.

 

페이스북 개발자 닉 슈록, 댄 셰이퍼, 리 바이런은 GraphQL을 만들기 시작했는데, 이것은 페이스북의 클라이언트 및 서버 애플리케이션 데이터 모델 요구사항과 기능을 정립하기 위한 쿼리 언어였습니다.

페이스북 개발자 리 바이런, 닉 슈록, 댄 셰이퍼. 

2. REST의 단점

오버페칭

- 클라이언트에서 사용하려고 요청한 데이터인데 필요하지 않은 데이터를 너무 많이 받아오는 경우

 

언더페칭

- 데이터를 요청하고나서 추가 데이터를 또 요청해야 하는 상황

 

엔드포인트 관리

- 보통 클라이언트에 변경 사항이 생기면 대개 엔드포인트를 새로 만들어야 하는데, 계속 이렇게 작업이 되면 엔드포인트가 빠르게 늘어난다. 

 

3. GraphQL 톺아보기

- GraphQL은 쿼리 데이터베이스용으로 만들어진 개념을 가져다가 인터넷에 적용해 만들어진 것입니다. GraphQL 하나로 여기저기 흩어져 있는 데이터를 한데 모아 받습니다. 

- 차이점은 SQL 쿼리는 데이터베이스로 보내는 반면, GraphQL 쿼리는 API로 보냅니다. SQL 데이터는 데이터 테이블 안에 저장되어 있으나 GraphQL 데이터는 저장 환경을 가리지 않습니다. 

- GraphQL에서는 SELECT 대신 Query를 사용해 데이터 요청을 보냅니다. INSERT, UPDATE, DELETE를 사용하는 대신 Mutation이라는 데이터 타입을 가지고 데이터를 조작합니다. 소켓 연결로 전달되는 데이터 변경 사항 감지는 Subscription을 사용합니다.

- GraphQL은 명세에 따라 표준화되어 있습니다. 즉, 프로그램 언어에 종속되어 있지 않다는 뜻입니다. 

 

3.1 GraphQL API 툴

- GraphQL 문법을 사용할 수 있는 사이트이다. 

- https://snowtooth.moonhighway.com (예제로 사용할 api)

- https://github.com/APIs-guru/graphql-apis (공용 GraphQL API 모음 사이트)

- https://www.graphqlbin.com/v2/6RQ6TM

 

3.2 Query

- Query는 GraqhQL 타입입니다. 루트 타입이라고도 하는데, 타입 하나가 곧 하나의 작업을 수행하며, 작업이 곧 쿼리 문서의 루트를 의미하기 때문입니다. API에서 query에 사용할 수 있는 필드는 API 스키마에 정의합니다. API 문서를 보면 Query 타입으로 선택할 수 있는 필드가 나와 있습니다.

- 쿼리 작성 시 중요한 것은 필요한 필드만 요청하는 것입니다.

 

3.3 Mutation

- 데이터를 새로 쓸 때 사용합니다. 쿼리와 다른 점은 데이터를 뮤테이션 하면 백엔드 데이터에 영향을 준다는 것입니다.

 

- 추가 시

mutation createSong {

  addSong(title: 'No Scrubs', numberOne: true, performerName: 'TLC') {

    id

    title

    numberOne

  }

}

 

- 수정 시

mutation closeLift {

  setLiftStatus(id: "jazz-cat", status: OPEN) {
    name
    status
  }
}

 

- 변수 사용

mutation closeLift($status: StringLiftStatus!) {

  setLiftStatus(id: "jazz-cat", status: $status) {
    name
    status
  }
}

3.4 Subscription

- 서버에서 푸시 중인 업데이트의 내역을 실시간으로 클라이언트에서 받아야 할 때 사용합니다.

 

참고문헌

http://www.yes24.com/Product/Goods/81537382

웹 앱 API 개발을 위한 GraphQL

https://www.youtube.com/watch?v=783ccP__No8