Posts [GraphQL] GraphQL이란 무엇일까? (Over/Underfetching 문제 해결)
Post
Cancel

[GraphQL] GraphQL이란 무엇일까? (Over/Underfetching 문제 해결)


GraphQL이란 무엇일까?


🎲 GraphQL이란?

그래프QL(영어: GraphQL)은 페이스북2012년에 개발하여 2015년에 공개적으로 발표된 데이터 질의어이다.[2] 그래프QL은 REST 및 부속 웹서비스 아키텍쳐를 대체할 수 있다. 클라이언트는 필요한 데이터의 구조를 지정할 수 있으며, 서버는 정확히 동일한 구조로 데이터를 반환한다. 그래프QL은 사용자가 어떤 데이터가 필요한 지 명시할 수 있게 해 주는 강타입 언어이다. 이러한 구조를 통해 불필요한 데이터를 받게 되거나 필요한 데이터를 받지 못하는 문제를 피할 수 있다.

출처 : https://ko.wikipedia.org/wiki/%EA%B7%B8%EB%9E%98%ED%94%84QL

여기서 맨 마지막 문장이 Graphql을 사용하는 이유입니다. 그리고 Graphql이 아래 두 가지의 문제점을 해결하는 것으로 볼 수 있습니다.


☝ Over-fetching 문제

예를 들어 사용자 명만을 받아오기 위해 REST API에서는 GET /users/ 을 했다고 가정해 보겠습니다.

/users/ 라는 URI를 통해서는 사용자 명 뿐만 아니라 성, 프로필 등 모든 정보가 담겨 있는 패키지를 받아오게 됩니다. 그렇다면 지금 상황에서는 DB에 내가 사용하지 않을 영역까지도 요청하게 되는 것입니다.

즉, 처음에 필요한 것은 성, 프로필, 사용자 명 등 이것 저것 정보들 중에서 사용자 명만 필요한데도 불필요한 데이터도 한꺼벋에 받게 되는 셈이 되는 것입니다. 이것을 Over-fetching이라고 합니다. 다시 말해, 내가 요청한 영역의 정보보다 많은 정보(쓸모없는 정보)들을 서버에서 받는 것을 말합니다.

GraphQL은 이러한 Over-fetching 문제 없이 코드를 짤 수 있습니다. 개발자가 어떤 정보를 원하는지에 대한 컨트롤이 가능해집니다. 즉, 디비에 오직 사용자명만 요청하면 받아오는 값도 사용자명 단 1개입니다.

아래는 자세한 사용 예시는 아니지만, 대략적으로 차이가 이렇다는 것을 그림으로 나타내 보았습니다.

Rest API : name 만 원하는데, 다른 정보들까지 같이 가져오게 됨

GraphQL : 필요한 정보만 요청하고 받아올 수 있음


✌ Under-fetching 문제

이 문제는 어떤 하나의 화면을 완성하기 위해 여러 번의 요청을 해야 하는 것을 말합니다.

예를 들어 REST API의 경우 아래 그림과 같습니다.

한 화면에 여러 정보들을 띄워야 하는데, 그 때마다 다른 API(/feed/ , /notify/ , /user/ ,…) 를 호출하게 됩니다. 즉 여러 개의 endpoint를 가지게 됩니다.

이것도 GraphQL이 해결할 수 있습니다. 앞서 보았듯이 한 번의 쿼리에 내가 정확하게 원하는 정보들을 받아올 수 있기 때문에, 여러 개의 endpoint를 가지지 않고 여러번의 API를 호출하는 일이 없어집니다. 예를 들어 /graphql 이렇게 단 하나만의 endpoint가 있는 것입니다.

  • 요청
1
2
3
4
5
6
7
8
9
10
11
12
13
query {
 feed {
  comments
  likeNumber
 }
 notifications {
  isRead
 }
 user {
  username
  profilePit
 }
}
  • 응답
1
2
3
4
5
6
7
8
9
10
11
12
13
{
 feed: [
  {
   comments:1,
   likeNumber: 20
  }
 ],
 notifications: [
  {
    isRead: true
  },
 {
 ,....

다음에는 GraphQL 서버를 만들어 보고, 실제로 쿼리를 사용하는 것에 대해 포스팅 하도록 하겠습니다. 감사합니다!


본 내용은 GraphQL로 영화 API 만들기 강의를 듣고 난 뒤 정리한 포스팅입니다.

[React] 리액트 Hooks (2) - useReducer

알고리즘 - 위상 정렬(Topology Sort)