GraphQL이란?

GraphQL이란?

GraphQL 은 페이스북에서 만든 어플리케이션 레이어 쿼리 언어입니다. 기존의 웹 혹은 모바일 어플리케이션의 API 를

구현 할 때는, 통상적으로 REST API 가 사용됩니다. 기존의 REST API 를 사용하여 API 를 구현을 한다면, 우리가 클라이언트사이드에서 어떠한 기능이 필요 할 때마다 그때 그때 새로운 API를 만들어주었어야했습니다.

GraphQL: A query language for APIs.

 

즉 아래의 이미지를 참조하면 이해하기 쉽습니다.

[참고 1] REST API와 GraphQL의 기술스택 비교

[참고 2] REST API와 GraphQL API의 사용

[참고 1]과 [참고 2]의 이미지의 내용을 보면 여러번 네트워크 호출이 필요없이 GraphQL에서는 한번의 네트워크 호출로 처리할 수 있는 것을 알 수 있습니다. 즉 [참고 2] 그림에서 보듯이 REST API는 요청을 3번 하는 것을 GraphQL 한번의 요청으로 처리하는 것을 알 수 있습니다. 

 

그럼 여기서 의문점이 생깁니다. REST API를 쓰지 않고 왜 GraphQL을 써야할까요??

 

- GraphQL를 쓰는 이유?

보통의 경우는 백엔드 API 서버에 REST API로 요청을 하여 데이터를 받아오는 형태인데, 이 때, Over-Fetching과 Under-Fetching이 발생합니다. 이런 Over-Fetching과 Under-Fetching을 해결해주는게 GraphQL입니다.

 

- Over-Fetching이란?

결론 - 불필요한 데이터까지 받아오는걸 Over-Fetching이라 한다.

예를들어, /users라는 endpoint가 있다고 가정해봅시다.

GET /users

{
    "users": [
           {
                "id": "1",
                "username": "test1",
                "age": "20",
                "email": "test1@gmail.com"
            },
            {
                "id": "2",
                "username": "valleycho",
                "age": "22",
                "email": "valleycho@gmail.com"
            }
    ]
}

→ 위의 데이터 형식으로 이루어져있을 때, 1번 유저의 username만 받고 싶다고 가정합시다.

GET /users/1과 같이 요청을 하면 데이터를 받아올 수 있는데, 이 때 요청에 대한 응답의 데이터는 age, email 등 불필요한 정보까지 받아오게 됩니다. 그럼 받아온 데이터를 username만 필요하니 걸러내는 작업을 해줘야 하기 때문에 리소스 낭비가 발생하게 됩니다.

이를 Over-Fetching이라 합니다.

 

- Under-Fetching이란?

결론 - 필요한 정보를 가져오기 위해 여러번 요청을 해야하는 것을 Under-Fetching이라 한다.

예를들어, 사용자 프로필, 알림, 피드 등의 데이터를 불러올 때, 요청을 여러본 보내야 합니다.

/feed/
/notifications/
/user/1/

 

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

해결방법은 아래와 같습니다.

query {
     feed {
          comments
          likeNumber
     }
     notifications {
          isRead
     }
     user(id: 1) {
          username
     }
}

→ 쿼리 요청(백엔드에 요청함)

{
    feed: [
       {
             comments: 1,
             likeNumber: 25,
       }
    ],
    notifications: [
       {
             isRead: true
       }
    ],
    user: {
             username: test1,
    }
}

→ 원하는 정보만 JSON 데이터로 반환해줍니다.

 

 

- GraphQL의 장단점

장점

• 필요한 데이터만 반환할 수 있음.
• 1번의 호출로 원하는 데이터를 한번에 가져올 수 있음.
• 확장이 용이.
• 필요한 데이터만 반환하므로 데이터 비용을 절감

단점

• 백엔드, 클라이언트 개발자 양쪽 다 러닝커브가 있음.
• 요청이 text 형식이라 File 전송 등을 구현하기 어려움.

 

간단하게 GraphQL을 연습할 수 있는 사이트입니다.

 https://graphql-tryout.herokuapp.com/graphql

 

[참고 3] GraphQL 연습 사이트

→ <DOCS (클릭)

[참고 4] GraphQL 연습사이트

→ query랑 mutation있는데 클릭해보면 어떻게 구성되어있는지 확인할 수 있다.

연습 쿼리는 아래와 같습니다. 자유롭게 연습하시면 됩니다.

[연습용 1]

 

[연습용 2]

[연습용 3]