APOLLO란 무엇인가?

1) Apollo 소개

Apollo란 GraphQL의 클라이언트 라이브러리 중 하나로 GraphQL을 사용한다면 거의 필수적으로 사용하는 상태 관리 플랫폼입니다.

다른 선택지로 GraphQL을 개발한 Facebook에서 직접 만든 Relay가 있지만, 학습 비용이 높고 React 계열만 지원한다는 단점이 있으며, 그에 반해 Apollo는 유연하고 러닝 커브가 높지 않을뿐더러 Front-End 프레임워크 삼대장?인 React, Agular, Vue를 동시 지원한다는 점에서 인기가 높은 것 같습니다.

특히, 뷰에서 React를 쓸 경우 조합이 금상첨화가 되는데, 그 악명 높은 Redux를 Apollo로 대체가 가능해집니다.

(GraphQL과 Apollo를 쓰면, REST API와 Redux를 없애버릴 수 있습니다...)

 

또한, Apollo 자체는 플랫폼에 종속적이지 않으므로 앞으로 GraphQL과 함께 웹 및 모바일 시장을 장악하겠다는 당찬 야망을 가지고 있습니다.

2) Apollo 특징

제가 직접 사용해보며 공감한 Apollo의 특징은 다음과 같습니다.

 

(1) Query 및 Mutation 직접 전송

단순해 보이지만, 이는 클라이언트를 이용하는 주요 이유 중 하나이자, 엄청난 파급효과를 일으킵니다.

Query 및 Mutation을 Apollo에서 전송함으로써 얻는 이점은 바로, API 서버에서 데이터를 가져오기 위해 번거로운 네트워크단의 HTTP 요청을 신경 쓸 필요가 없어진다는 것입니다.

좀 더 직설적으로 말하면, fetch 혹은 axios를 사용할 필요가 없다는 뜻입니다!

 

(2) 전송받은 데이터 캐싱

Apollo는 Query를 통해 전송받은 데이터를 자동으로 캐싱 합니다.

그에 따라, 클라이언트의 반복 요청을 줄여 서버 부하를 줄일 수 있을 뿐만 아니라, 서비스를 이용하는 사람들에게 더 나은 사용자 경험을 제공할 수 있습니다.

또한, 크롬 브라우저에서 Apollo Client Developer Tools 익스텐션을 설치하면, 개발 환경에서 캐시 상태와 정보를 즉시 확인이 가능하므로 무척 편리합니다.

(3) Local state 관리

Apollo를 사용하면, GraphQL 서버에 Query, Mutation, Resolver를 작성하듯이, 동일하게 클라이언트에서도 클라이언트 만의 Local state를 만들어 Query, Mutation, Resolver의 사용이 가능합니다.

이는 서버에서 받아온 데이터와 클라이언트에서 관리하는 데이터를 병합할 수 있음을 의미하며, 이를 이용해 효율적인 프로그래밍과 데이터 관리가 가능해집니다.

단, GraphQL 서버에 지정되어 있는 type 중에서 필드를 생성해야만 하며, 클라이언트에서 생성한 Local state는 서버에 전송되지 않아야 하므로 @client 키워드를 사용해 제어해야 합니다.

 

여기까지, GraphQL의 짝꿍 Apollo에 대하여 알아보았습니다.

저도 어서 빨리 Apollo를 숙달하여 GraphQL을 보다 능숙하게 다룰 수 있도록 해야겠습니다.