[기본] GraphQL 이란?

이번에 웹/앱 전망, 동향, 화두 등을 검색하다가 GraphQL을 마주쳤고, Graph.. QL.. 이름만 보고 차트를 그리는 라이브러리, 플러그인 정도로만 생각했던.. 무지했던 나를 반성하며 GraphQL에 대해 알아보고자 한다..

 

 GraphQL 이란 

 

GraphQL은 클라이언트 애플리케이션에서 어떤 데이터가 필요한지 기술할 수 있고 특정한 데이터베이스나 특정한 스토리지 엔진과 관계되어 있지 않으며 기존 코드와 데이터에 의해 대체 가능한 API를 위한 쿼리 언어 쿼리 언어이다. 대부분의 REST API에서는 실제 클라이언트가 표시하는 형태와 API 프로토콜이 일치하지 않는 경우가 많은데 이와 달리 GraphQL은 쿼리를 클라이언트의 UI 계층 구조와 유사하게 구성할 수 있다. 따라서 쿼리가 하나의 커다란 트리를 이루게 된다.

 

*쿼리언어 : Query Language 는 정보를 얻기 위해 보내는 질의문(Query)을 만들기 위해 사용되는 Computer 언어의 일종이다.

 

■ GraphQL의 탄생배경

 

RESTful API 로는 다양한 기종에서 필요한 정보들을 일일히 구현하는 것이 힘들었다.
예로, iOS 와 Android 에서 필요한 정보들이 조금씩 달랐고, 그 다른 부분마다 API 를 구현하는 것이 힘들었다.

 

■ GraphQL와 RESTful의 차이

 

1. RESTful 은 각 Resource 종류 별로 요청을 해야하고, 따라서 요청 횟수가 필요한 Resource 의 종류에 비례한다. 
반면 GraphQL 은 원하는 정보를 하나의 Query 에 모두 담아 요청하는 것이 가능하다.

2. RESTful 은 응답의 형태가 정해져있고, 따라서 필요한 정보만 부분적으로 요청하는 것이 힘들다. 
반면 GraphQL 은 원하는 대로 정보를 요청하는 것이 가능하다.

 

■ GraphQL와 RESTful의 차이(코드와 함께 비교)

 

백엔드 개발자들이 구축한 API 서버에 요청을 통해 데이터를 받게 되는데 이 때, Over-Fetching과 Under-Fetching이 발생한다. 이를 해결해주는 것이 GraphQL이다. 

 

Over-Fetching 

예를 들어, /users 라는 endpoint가 있다고 가정해보자

GET /users

{

  "users": [

    {

    "id": "1",

    "username": "Tora",

    "age": "19",

    "email" : "syjkim0125@gmail.com"

    },

    {

    "id": "2",

    "username": "Marvel",

    "age": "300",

    "email": "Marvel@gmail.com"
    
    }
  
  ]
  
}

이와 같이 이루어져 있는 데이터들이 있을 때, 1번 유저의 username이 받고 싶다.
그렇다면 GET /users/1 과 같이 요청을 하게 된다.  
이 때, 이 요청에 대한 응답은 username뿐만 아니라 age, email 등 필요하지 않은 정보들까지 받게 된다.
즉, 우리는 username 하나만 필요하지만 이렇게 모든 데이터들을 불러온 후, 
내가 필요한 것만 걸러내서 사용해야 하기 때문에 리소스 낭비가 발생하게 되는것 이다.

Under-Fetching

 

예를 들어, 인스타그램을 사용자가 실행시켰다고 가정해보자.
그러면 피드, 사용자 프로필, 알림 등을 불러오는 요청을 여러 번 보내야 한다.

/feed/

/notifications/

/user/1/

즉, REST에서 하나를 완성하려고 많은 소스를 요청하게 된다.

 

GraphQL을 사용

 

GraphQL을 사용하면, 이 Over-Fetching 과 Under-Fetching 을 해결할 수 있다.

 

query {

  feed {

  comments

  likeNumber

  }

  notifications {

  isRead

  }

  user {

  username

  profilePic

  }
  
}

이와 같이 GraphQL Backend에 쿼리를 보내면

{

  feed: [

  {

  comments: 1,

  likeNumber: 20

  }

  ],

  notifications: [

  {

  isRead: true

  }

  ],

  user: {

  username: Tora,

  profilePic: "http://!@!~"

  }

}

원하는 정보만 JavaScript Object로 수신된다. 즉, 정확히 요청한 것만 보내준다.
이와 같이 GraphQL을 사용하면 OverFetching과 UnderFetching 발생을 해결할 수 있다.

 

■ GraphQL 또는 RESTful 선택

 

GraphQL : 

서로 다른 모양의 다양한 요청들에 대해 응답할 수 있어야 할 때
대부분의 요청이 CRUD(Create-Read-Update-Delete) 에 해당할 때

 

RESTful : 

HTTP 와 HTTPs 에 의한 Caching 을 잘 사용하고 싶을 때
File 전송 등 단순한 Text 로 처리되지 않는 요청들이 있을 때
요청의 구조가 정해져 있을 때

 

하지만, 꼭 둘 중 하나만을 선택해야 하는것은 아니고 어떤 조건인지, 어떤 목표로 사용하는지에 따라 GraphQL 만을 사용할 것인지 RESTful 만을 사용할 것인지 혹은 둘 다 사용할 것인지 결정하는것이 가능하다.

 

 참고 

 

holaxprogramming

sapzil

tora-it-kingdom