1. GraphQL 소개 - GrpahQL이란?

- GraphQL이란?

 GraphQL 은 API를 위한 쿼리 언어이며 타입 시스템을 사용하여 쿼리를 실행하는 서버사이드 런타임입니다. 

GraphQL은 특정한 데이터베이스나 특정한 스토리지 엔진과 관계되어 있지 않으며 기존 코드와 데이터에 의해 대체됩니다.

- GraphQL 공식문서 참고

- GraphQL 왜 쓰나요?

 기존의 웹 혹은 모바일 어플리케이션의 API 를 구현 할 때는, REST API가 사용되어 왔습니다. (REST API란?)

백엔드 개발자들이 구축한 API 서버에 요청을 통해 데이터를 받습니다. 이 때, Over-Fetching과 Under-Fetching이 발생합니다.

이를 해결해주는 것이 GraphQL입니다.

1. 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 하나만 필요하지만 이렇게 모든 데이터들을 불러온 후, 

내가 필요한 것만 걸러내서 사용해야 하기 때문에 리소스 낭비가 발생하게 됩니다.

이를 Over-Fetching 이라고 합니다.

<정리 - 난 username만 쓸거야! 근데 쓸데없이 많은 정보가 넘어와>

2. Under-Fetching이란?

예를 들어, 인스타그램을 사용자가 실행시켰다고 가정해봅시다.

그러면 피드, 사용자 프로필, 알림 등을 불러오는 요청을 여러 번 보내야 합니다.

ex)

/feed/
/notifications/
/user/1/

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

이를 Under-Fetching 이라고 합니다.

<정리 - 하나를 완성하려고 요청을 여러 번 해야해!>

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

위에서 사용했던 예시들을 GraphQL을 이용하여 해결하는 것을 보겠습니다.

query {
feed {
comments
likeNumber
}
notifications {
isRead
}
user {
username
profilePic
}
}

-> 이게 Query입니다. 

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

{
feed: [
{
comments: 1,
likeNumber: 20
}
],
notifications: [
{
isRead: true
}
],
user: {
username: Tora,
profilePic: "http://!@!~"
}
}

-> 원하는 정보만 JavaScript Object로 옵니다.

즉, 정확히 요청한 것만 보내줍니다.

이와 같이 GraphQL을 사용하면 OverFetching과 UnderFetching 발생을 해결할 수 있습니다.

다음 시간에는 간단한 실습과 함께 GraphQL에 대해서 공부해보도록 하겠습니다.

참고 자료 :

1. GraphQL 공식문서 : https://graphql-kr.github.io/

2. REST API 제대로 알고 사용하기 : https://meetup.toast.com/posts/92

3. GraphQL의 핵심 정리 : https://medium.com/@han7096/graphql%EC%9D%98-%EC%9E%A5%EC%A0%90-overfetching%EA%B3%BC-underfetching%EC%9D%84-%ED%95%B4%EA%B2%B0%ED%95%98%EB%8B%A4-6e9d19c28bff

4. GraphQL 강좌 1편: GraphQL이 무엇인가? : https://velopert.com/2318

5. 노마드 코더 - GraphQL강좌 : https://academy.nomadcoders.co/