핑크색 로고에 이름도 이쁜(?) 그래프큐엘이 무엇일까 궁금했다. 몇일간 짧은 강의와 함께그래프큐엘을 만나본 감상을 남겨볼까 한다.
OverFetching? UnderFetching? 한큐에 해결하자
예를 들어 보자.
나는 특정 약의 주의사항에 대한 정보가 필요하다. 약에 대한 정보와 특정 약에 대한 정보를 받아오는 API는 다음과 같다.
모든 약의 정보를 받아온다
특정 약 정보만 가져온다
베나치오의 주의사항을 가져오려면 모든 약들을 리스트로 가져오고 그 중에 내가 원하는 베나치오의 id를 알아내서 다시 한번 자세한 정보를 가져와야 한다.
특정 약의 주의사항을 알기위해 서버에 두번이나 요청을 보내야한다. 이런 경우를 UnderFetching 이라 한다.
반대로 난 약들의 이름만 필요한데 memo, capa 등 필요없는 정보까지 요청에 딸려 들어온다. 이걸 OverFetching 이라고 한다.
그래프큐엘은 이걸 클라이언트 측에서 쿼리를 보내 내가 원하는 데이터만 받아올 수 있다. 즉, 한큐에 효율적인 요청을 보낼 수 있다.
만약 베나치오의 주의사항을 가져오고 싶다면 그래프큐엘의 경우 아래와 같을 수 있다.
실제로 5병 먹는다고 죽지는 않는다
마찬가지로 약들에 대한 정보도 필요한 것만 요청할 수 있다.
id 와 name 만 요청했다.
이처럼 그래프큐엘은 사용하는 측에서 응답의 형태를 원하는 대로 바꿀 수 있다. 내가 원하는 정보만 가져와서 사용할 수 있다는 점이 정말 매력적이었다.
어떤 장점이 있을까?
아직은 더 공부를 해봐야 알겠지만 짧게 사용하면서 드는 장점은 아래 2 가지 이다.
- 요청 횟수가 줄어들 수 있다.
전혀 다른 엔드포인트에서 각기 다른 정보들을 불러와야 하는 경우라면 요청이 여러번이 될 수 있다. 예를 들어 인스타그램에 로그인한다면 사용자 정보, 피드 정보 등 요구하는 리소스가 다르기 때문에 REST API의 경우라면 여러번 요청을 보내야 할 수 있다.
\2. 요청의 크기가 작아질 수 있다.
사용하는 측에서 원하는 형태로 보내주기 때문에 필요한 정보가 적다면 요청의 크기도 작아질 수 있을 것 같다.
놀라운 경험
정보를 가져오고 필요한 부분만 추려내고 그걸 다시 보내고 등등 귀찮고 번거로운 과정 없이 내가 요청하는 대로 오는 응답이 왔을 때는 정말 신기하고 놀라웠다.
예전에 가족간 상비약을 공유하는 어플리케이션을 만드는 프로젝트에서 백엔드로 참여했었는데, 그 때 그래프큐엘을 알았더라면 우리 모두 좀 더 행복하고 즐거운 표정으로 밤을 새지(?) 않았을까 하는 생각이 들었다.
이번에 짧게 공부하면서 서버는 그래프큐엘 요가를 사용했고(플레이그라운드 너무 좋았다), 클라이언트는 아폴로(캐시기능이 있다니!!??)를 사용했다. 아주 살짝 핥아 본 수준이라 말할 것들이 많진 않지만, 틈틈히 시간을 내어 하나씩 더 깊이 공부할 예정이다.(https://github.com/facebook/react/issues/11527)