[npm] Apollo란?

# APOLLO란?

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

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

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

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

Apollo Client는 GrpahQL API를 호출하기 위해 사용되는 라이브러리입니다. 이번 포스트에서는 React 앱에서 Apollo Client를 사용하여 GraphQL API를 호출하는 방법에 대해서 알아보겠습니다.

사실, GraphQL API를 호출할 때, 반드시 Apollo Client와 같은 전용 클라이언트가 필요한 것은 아닙니다. 

# 대체제

- Redux

- Akita

# 장점 

(3) Local state 관리

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

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

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

# 설치법

- npm i apollo-boost (상황에 따라 설치)

- npm i graphql (필수 설치)

- npm i react-apollo (상황에 따라 설치)

- npm i apollo-server-express (express 환경에서 구축시 설치)

 apollo-server-express : express환경에서 apollo 환경을 쉽게 구축할 수 있게 해주는 라이브러리.

 graphql은 Facebook에 정의한 GraphQL 스팩을 JavaScript 언어로 구현한 패키지입니다. 

 Apollo Server든 Apollo Client든 내부적으로는 모두 graphql 패키지에 의존하고 있기 때문에 반드시 함께 설치를 해줘야 합니다.

 apollo-boost는 Apollo에서 제공하는 GraphQL 클라이언트 패키지이며, (클라이언트 상에서, apollo 상태관리 라이브러리를 사용할 경우?)

 react-apollo는 React 앱에 Apollo Client를 연결(Integration)해주는 패키지 (클라이언트 상에서, apollo 상태관리 라이브러리를 사용할 경우?)

- react가 아니고 angular에서 사용할 경우, angular-apollo?

# 최소 요건

- Node.js v8.x or later

- npm v6.x or later

- git v2.14.1 or later

# 출처

https://hellominchan.tistory.com/227#:~:text=1)%20Apollo%20%EC%86%8C%EA%B0%9C,%ED%95%98%EB%8A%94%20%EC%83%81%ED%83%9C%20%EA%B4%80%EB%A6%AC%20%ED%94%8C%EB%9E%AB%ED%8F%BC%EC%9E%85%EB%8B%88%EB%8B%A4.

[react 클라이언트 apollo 사용예시]

https://www.daleseo.com/graphql-react-apollo-client/

[express 서버 apollo 사용 예시]

https://helloinyong.tistory.com/265