GraphQL 클라이언트 라이브러리
GraphQL은 프론트엔드 개발자에게 편의를 제공한다.왜냐하면 REST API를 사용하면서 겪을 수 있는 Under/Overfetch를 비롯한 많은 불편함과 단점들을 해소시켜주기 때문이다.복잡성은 막중한 연산 작업을 모두 감당할 수 있는 강력한 머신이 존재하는 서버 측에 맡겨버리면 되고, 클라이언트는 불러올 데이터가 어디서 비롯되는지 더 이상 알 필요가 없이 단지 딱 하나의 유연하면서도 일관성있는 API를 사용하기만 하면 된다.
REST API를 사용하여 데이터를 불러올 때에 대부분의 어플리케이션은 다음과 같은 단계를 거친다.
1.HTTP 요청을 구성하고 보낸다 (Javascript의 fetch 등을 사용)
2.서버의 응답을 받고 해석한다
3.데이터를 로컬에 저장한다 (메모리 또는 저장 장치에)
4.UI에 데이터를 표시한다
이상적인 형태의 선언적인 데이터 불러오기 접근 방식에서는 클라이언트가 아래의 2단계 이외에는 수행할 필요가 없어질 것입니다.
1.필요한 데이터를 서술한다
2.UI에 데이터를 표시한다
모든 저수준 네트워크 작업, 데이터 보관 작업 등은 추상화되버리고 데이터 의존성의 선언만이 가장 큰 관심사로 거듭나는 것입니다.
이것이 정확히 Relay, Apollo 등의 클라이언트 라이브러리가 해주는 것들입니다. 위와 같은 추상화를 통하여 기반 환경의 반복적인 구현을 신경쓰지 말고 어플리케이션의 중요한 부분에 집중할 수 있도록 해줍니다
GraphQL 클라이언트로는 크게 두 가지가 있다.
1.Apollo Client로, 강력하면서도 유연한 GraphQL 클라이언트를 모든 주요 개발 플랫폼에서 사용할 수 있도록 하겠다는 방향성 아래 개발 중
2.Relay로, Facebook이 개발한 원조 GraphQL 클라이언트입니다. 성능 최적화가 상당히 이루어져있으며, 오직 웹에서만 사용 가능
Apollo는 모든 저수준 네트워크 로직들을 추상화하여 GraphQL 서버에 대한 인터페이스를 제공해준다.따라서 REST API들을 다룰 때와 달리, HTTP 요청을 구축하는 일을 더 이상 하지 않아도 된다.
기존에 API를 통해 데이터를 불러오고자 fetch를 사용했다면
graphQL은 데이터 요구 사항이 담긴 쿼리만 작성하면 요청/응답을 ApolloClient 인스턴스를 통해 전송하기만 하면 된다
시작
npm install apollo-boost react-apollo graphql
- apollo-boost : apollo-client구성에 필요한 패키지들의 집합)
- react-apollo : react와 apollo연결
- graphql : graphQL쿼리를 사용할 수 있게 해줌
apollo-boost는 Apollo 클라이언트를 다루는 데에 필요한 몇가지 패키지들을 한번에 설치해주는 편리한 모음 패키지입니다. 아래 패키지들을 포함합니다.
apollo-client: 모든 마술이 이루어지는 곳!
apollo-cache-inmemory: 추천하는 캐시 라이브러리
apollo-link-http: 원격 데이터 불러오기에 필요한 Apollo Link
apollo-link-error: 오류 처리를 위한 Apollo Link
apollo-link-state: 로컬 상태 관리를 위한 Apollo Link
graphql-tag: 쿼리와 뮤테이션에 사용될 gql 함수를 내보내줍니다
react-apollo는 Apollo 클라이언트를 React에서 사용하기 위한 바인딩을 제공합니다.
graphql은 Facebook이 작성한 GraphQL의 참조 구현. Apollo 클라이언트는 여기에 포함된 기능들 중 일부를 사용하게 됩니다.
참고
