이번 포스팅에서는 GraphQL을 사용하게 되면 해결되는 문제점들에 대해서 살펴보도록 하려고 한다. 나아가 문제점들을 GraphQL로 어떻게 해결할 수 있는지에 대해서도 간단히 살펴보도록 하자.
1. Over-fetching
예를 들어, 모든 사용자들의 이름을 웹사이트에 보여주고 싶다고 가정해보자.
사용자들의 이름을 얻기 위해 GET을 사용하게 될 것이다.
이 때, GET을 사용해서 정보를 얻게 되면 우리가 필요한 사용자의 이름뿐만 아니라 프로필사진이나 그 외의 정보들도 함께 얻게 된다.
단지 사용자들의 이름을 웹사이트에 보여주기 위해서 GET을 사용했지만, 필요하지 않은 부분의 정보까지 얻게되는 문제가 발생하게 된다.
Database에 내가 사용하지 않을 영역을 요청하는 방식은 무척이나 효율적이지 못하다.
이를 Over-fetching 이라고 한다. 내가 요청한 영역의 정보보다, 많은 정보를 서버에서 받는 것을 의미한다.
GraphQL을 사용하게 되면 Over-fetching 없이 코드를 짤 수 있고, 개발자가 어떤 정보를 원하는 지에 대해 통제가 가능하다. frontend에서 database에게 필요한 정보만 요청하면서 이 문제가 해결이 된다.
2. Under-fetching
Under-fetching을 설명하기 위해 한 가지 상황을 생각해보자.
인스타그램을 실행시키게 되면, 앱의 시작과 동시에 많은 정보를 받게된다.
그 정보에는 가령 현재 페이지의 feed와 알림, 사용자 프로필이 있다고 하자.
이 정보를 얻기 위해 우리는 세 번의 요청을 해야한다.
즉, 3가지 요청이 3번 오고가야 인스타그램 앱이 정상적으로 시작이 되는 것이다.
이를 Under-fetching이라고 한다.
REST에서 한 가지를 완성시키기 위해 많은 소스를 요청하는 것이다.
마찬가지로 GraphQL을 사용하게 되면 query에 우리가 원하는 정보만을 입력해 원하는 형태로 정보를 받을 수가 있다.
3. 예시
위에서 설명한 문제점들을 해결하기 위해 GraphQL에선 한 개의 Query로 만들어 정보를 요청할 수 있다.
여기서 Query는 Database에서 무언가를 요청하고 GraphQL 언어로 내가 원하는 정보를 알려줄 수 있다.
다음은 Query의 예시이다.
인스타그램을 실행하기 위해 필요한 정보를 요청하기 위해 다음과 같은 Query를 작성할 수 있다.
- feed : 댓글들(comments), 좋아요 수(likeNumber)
- notificaion : 읽음 여부(isRead)
- user : 사용자이름(username), 프로필사진(profilePic)query {
feed {
comments
likeNumber
}
notification {
isRead
}
user {
username
profilePic
}
}이것이 Query이다.
이것을 GraphQL의 Backend에 보내면 이와 같은 요청 정보를 담은 Object(Javascript)를 사용자에게 보낸다.
이 때 Object는 우리가 요청한 정보만 정확하게 보내게 된다.
GraphQL은 이러한 방식으로 Over-fetching과 Under-fetching 문제를 해결할 수 있다.
