Apollo

GraphQL이 적용된 프로젝트를 쉽게 만들 수 있게 해주는 Node.js 패키지

ApolloServer : GraphQL이 적용된 서버를 쉽게 만들어줌

ApolloClient : GraphQL을 통해, 클라이언트상의 LocalState를 이용할 수 있게 만들어줌

 

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과 함께 웹 및 모바일 시장을 장악하겠다는 당찬 야망을 가지고 있습니다.

 

 

-------

 

리액트 프로젝트에 Apollo Client를 사용하기 위해서 다음 패키지 세개를 설치합니다.

$ npm i apollo-boost graphql react-apollo

참고로 apollo-boost는 Apollo에서 제공하는 GraphQL 클라이언트 패키지이며, graphql은 Facebook에 정의한 GraphQL 스팩을 JavaScript 언어로 구현한 패키지입니다. Apollo Server든 Apollo Client든 내부적으로는 모두 graphql 패키지에 의존하고 있기 때문에 반드시 함께 설치를 해줘야 합니다. react-apollo는 React 앱에 Apollo Client를 연결(Integration)해주는 패키지입니다.

 

React에서 Apollo Client를 사용해서 좀 더 간편하게 GraphQL API를 호출할 수 있도록 react-apollo 패키지는 Query와 Mutation 컴포넌트를 제공합니다. 본 포스팅에서 사용하는 GraphQL API는 mutation은 제공하지 않기 때문에, query를 호출하는 예제 컴포넌트만 작성해보겠습니다.

먼저, apollo-boost 패키지에서 제공하는 gql이라는 template literal tag를 사용해서 일반 자바스크립트 문자열을 GraphQL 구문으로 바꿔줍니다. 그 다음, 이 GraphQL 구문을 react-apollo 패키지에서 임포트 한 Query 컴포넌트의 query prop으로 넘김니다. 그리고 이 Query 컴포넌트는 GraphQL API 호출 상태에 따라 랜더링할 내용을 리턴하는 함수를 자식으로 가져야합니다.

In memory Cache 란?

apollo 공식 문서를 보면 아래와 같이 쓰여져 있다.

apollo client 는 gql 의 결과를 InMemoryCache 에 저장하며, 이를 통해 클라이언트는 불필요한 네트워크 요청 없이 동일한 데이터에 대해 요청할 수 있다.

공식 문서를 좀 더 들여다 보면 InMemoryCache 는 쿼리 응답 개체를 내부 데이터 저장소에 저장하기 전에 이를 정규화(?) 하며 아래와 같은 단계를 가진다

• 캐시는 응답 받은 데이터에 포함된 모든 식별 가능한 객체에 대해 고유한 ID를 생성
• 캐시는 개체를 ID별로 플랫 룩업 테이블(DB 테이블 같이..?)에 저장한다.
• 들어오는 객체가 기존 객체와 동일한 ID로 저장될 때마다 해당 객체의 필드가 병합된다.

---

참고

In memory Cache

https://velog.io/@talentceffort/Apollo-In-Memory-Cache-%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C