Graphql 데이터 최적화

Graphql 사용 정의
보통 Graphql 을 사용하는 이유는 Restful API 의 Over-Fetching의 데이터를 Under-Fetching으로 사용하는 것이다.

Over-Fetching이란 필요이상의 데이터를 불필요하게 fetch 하는것을 의미하는데 그만큼 서버의 트래픽 부하 및 요청크기가 많아 지기 떄문에 비용면과 사용자 경험측면에서 좋지 않는 점이있다. 이를 해결하기위해 Graphql을 사용함으로써 Under-Fetching 즉, 기존의 데이터량으 필요한만큼과 사용하는 데이터로 줄여서 사용하는 것이다.

문제점

하지만 우리 프로젝트의 문제점은 이러한 이점을 배제한체 모든 데이터를 쿼리에 넣어 불러오기때문에 graphql 에대한 이점이 없었다.

따라서 graphql 최적화를 통해 필요한 데이터의 쿼리만 사용하여 불러오는 데이터의 양과 시간을 줄이도록 하고자했다.

graphql 최적화 전

프로리스트를 불러오는 데 걸리는 시간과 데이터 크기

크기: 100kb

소요 시간: 1.9초

 

보시다시피 빨간박스의 데이터가 최적화전에 프로들의 목록과 데이터를 불러오는 사항인데 불필요한 데이터까지 불러오기때문에 많은 양과 시간이 걸리는 것을 확인할수 있다. 

graphql 최적화 후

전과후 사이즈, 소요시간 비교

여러번 호출하여 소요시간 평균값 계산하기

사이즈: 16.6kb ( 100kb → 16.6kb 축소로 기존대비 크기 83.4% 감소 )

소요시간: 552ms ~ 725ms( 2.1s → 0.552s ~ 0.725s 감소로 기존대비 65.4% ~ 73.7% 감소)

 

위와같이 graphql을 최적화를 통해 호출 데이터양이 많이 줄었고 시간또한 크게 줄었다. 이를 통해 사용자 경험을 대폭 향상 시킨 효과를 얻게되었다.

 

 

쿼리

실제 코드는 보여줄수없지만 약 160줄의 쿼리문이였고 최소화한 쿼리는 27줄이이었다.

 

해당 graphql query 와 해당 사이즈, 시간을 측정하기 위해 사용한 툴은 GraphQL Network Inspector 이다.