GraphQL 이란?

1. GraphQL

REST API를 통해 서버로 부터 데이터를 fetching 할 때 많은 문제점들이 있었다. 그런점들을 개선하고자 페이스북에서 발표한 쿼리 언어이다.

REST API와는 다르게 클라이언트에서 필요한 데이터만 뽑아서 요청할 수 있다는 장점이 있다.

응답은 JSON 형태로 주어진다.

2. REST API의 단점

2.1 over fetching

다들 한번쯤 개발하면서 생각해봤을 것이다. 겨우 이거 하나 보여줘야되는데 이 많은 데이터들을 불러와야되나??

예를 들면, user의 이름을 보여주는 페이지에서 name이라는 데이터를 불러오기 위해서는 /user/GET 이런 endpoint로 요청을 날려야한다. 그렇게 되면

{
  user : {
    name : 'Thor',
    age : 1000,
    job : 'god of hammer',
    nickName : 'The Most Stupid Avenger',
    ...
  }
}

이렇게 Thor하나 얻고자 수많은 데이터를 패칭해야한다.

하나의 데이터를 얻기 위해 필요하지 않은 정보들까지 불러와야하는 것을 over-fetching 이라고 한다

2.2 under fetching

반대의 경우를 알아보자.

어떤 페이지에서 user 정보와 avengers 친구 목록을 보여줘야한다고 가정해보자.

먼저 /user/{id}/GET이런 엔드포인트와 /user/{id}/avengers/GET 이런 엔드포인트로 두 번의 요청을 받아야한다.
즉, 두 번의 요청을 해야만 앱이 실행됨을 의미한다.

이렇게 한 번의 fetching으로는 충분한 데이터를 가져오지 못하는 경우를 under-fetching 이라고 한다.

이런 경우에는 단일 API 호출에 비해 네트워크 오버헤드가 추가되므로 속도 이슈가 발생할 수 있다.

3. GraphQL의 사용

3.1 스키마

GraphQL 서버에서는 쿼리가 실행될 때마다 타입 시스템에 기초해 쿼리가 유효한지 검사한다. 즉, GraphQL 스키마에서 사용할 타입을 먼저 지정한 후 사용해야 함을 의미한다.

스키마 정의)

type Person {
	id : Int!
	name : String!
    nickName : String!
    appearsIn: [Episode]!
}

• 오브젝트 타입 : Person
• 필드 : id, name, nickname
• 느낌표 : 필수 값을 의미
• 대괄호 : 배열을 의미함

3.2 리졸버(resolver)

gql에서 데이터를 가져오는 구체적인 과정이 구현되어 있는 곳이다. 리졸버를 통해 데이터를 디비에서 가져올 수 있고 파일에서 가져올 수도 있다. http를 통해서 원격 데이터를 가져올 수도 있다.

리졸버 함수는 4개의 인자를 받는다.

	Query:{
      resolver: (parent,args,context,info) => {
      	// ...
        // ...
      }
    }

• 첫 번째 인자는 parent로 연쇄적 리졸버 호출에서 부모 리졸버가 리턴한 객체이다.
• 두 번째 인자는 args로 쿼리에서 입력으로 넣은 인자이다.
• 세 번째는 context로 모든 리졸버에게 전달이 된다. 주로 미들웨어를 통해 입력된 값들이 들어있다.
• 네 번째는 info로 스키마 정보와 더불어 현재 쿼리의 특정 필드 정보를 가지고 있다.

3.3 쿼리 / 뮤테이션

쿼리

{
	hero {
    	name
    }
}

응답

{
  "data" : {
     "hero" :{
        "name" : "Thor"
     }
   }
}

다음 시리즈에서는 실제로 그래프큐엘 서버를 구축해보고 사용해보자.