우선, GraphQL을 도입하게 된 이유는 다음과 같다.
최근 사이드 프로젝트로 쇼핑몰을 만들게 되었는데, 해당 프로젝트가 웹 기반으로 이미 진행되고 있었고
모바일 진입을 위해 뒤늦게 안드로이드 팀이 합류했다. 합류하고나니 이미 서버가 GraphQL로 되어있었고 바꿀 수 없는 상황이였다.
하지만, 사이드 프로젝트이기 때문에 이 또한 재밌는 학습거리라고 생각하며
진행해보려고 한다.
우선은 Apollo 공식문서를 보고 튜토리얼을 따라 하려고 한다.
참고한 링크는 아래와 같다.
https://www.apollographql.com/docs/kotlin/tutorial/00-introduction
GraphQL이란 무엇인가?
페이스북에서 만든 쿼리 언어인데, 기존의 우리가 잘 알던 SQL은 서버에서 사용하는 것이다. 하지만 GQL(GraphQL)은 클라이언트 개발자가 작성하는 쿼리문이라고 생각하면 된다. 이 쿼리언어를 가지고 query혹은 mutation을 만드는 것이다. 이 둘에 대해서는 추후에 다시 다룰 것인데 query는 데이터를 얻어오기 위한 쿼리문장(CRUD중 R)이라고 생각하면 되고, mutation은 서버에 데이터를 보내서 조작하는 작업을 위한 문장(CRUD 중 CUD)이라고 생각하면 된다.
REST API vs GraphQL
기존의 REST API 규약을 따라 지정된 url과 요청 메소드 방식을 기반으로 서버측에서 마련한 엔드포인트에 요청을 보내는 것이 아니라, 서버측에서 마련한 하나의 엔드포인트에다가 쿼리 혹은 뮤테이션을 담아서 요청을 보내면 우리가 보낸 쿼리문에 따라서 데이터를 얻어올 수 있는 방식이다.
이로인해 개발자는 자신이 원하는 데이터만 딱 골라서 효율적으로 가져올 수 있다. 또한, 여러 번의 네트워크 호출로 하나의 데이터를 만들어야 했던 경우가 있을 수 있다. 이 경우에도 GraphQL을 사용한다면 하나의 요청으로 받도록 쿼리문을 수정해서 클라이언트 쪽에서 서버쪽으로 요청을 보낼 수 있다.
혹시 GQL의 쿼리문에 대해 한 번도 본 적이 없어서 헷갈린다면, 아래의 GQL문법을 보면 이해에 도움이 될 수 있다.
위 코드에서는 query라는 키워드와 해당 쿼리에 대한 이름(함수 이름이라고 생각하면 된다)이 생략되었는데, 실제로 클라이언트쪽에서 개발할때는 헷갈리지 않게 하기 위해 모두 지정해준다. 또한, 뒤에서 배울 아폴로 라이브러리는 이런 쿼리 이름을 강제하고 있다는 것을 알면 좋을 것 같다.
스키마란 무엇인가?
데이터베이스쪽에서 스키마라는 용어를 자주 접했을 것이다. GQL은 쿼리언어를 만들어서 이 문장대로 서버에게 우리가 얻고 싶은 데이터를 요청하는 방식이라고 했다. 그렇다면, GQL을 사용하는 우리 클라이언트 개발자들이 쿼리문을 만들기 위해 필요한 스키마가 필요할 것이다. 이 스키마를 서버(백엔드분들)에서 만들어서 우리(클라이언트 개발자)에게 제공해주어야 우리가 이 스키마를 토대로 GQL을 사용한 요청 문장을 만들 수 있다.
스키마에는 타입이라는 개념들이 정의되어있는데, 그냥 C언어의 구조체 같은 느낌이라고 생각하면 될 것 같다.
이 스키마와 타입에 대해서는 아래 적은 카카오 기술 블로그에 설명되어 있어서 굳이 깊게 설명하지는 않고 넘어가겠다.
Apollo란 무엇인가?
우리는 REST API를 사용하기 쉽게 보통 Retrofit2를 많이 사용했었다. Apollo는 우리가 GraphQL을 사용하기 쉽게 해주는 라이브러리라고 생각하면 된다. 필자도 현재 학습중인 라이브러리라서 튜토리얼을 따라서 학습해볼 예정이다.
미리 스포를 하자면, 기존의 레트로핏과 크게 다를 것은 느껴지지 않았다. 장점으로는 Apollo를 사용하니 우리가 작성한 쿼리문이 받아오는 응답Json을 파싱해주는 데이터 클래스를 프로젝트가 리빌드될 때마다 자동으로 만들어준다는 점이다.
작업 환경 준비
Apollo-Cli 설치
이걸 해줘야 스키마 다운로드가 편리해진다.
brew install apollo-cli위 문장을 터미널에 입력하고 엔터를 하면 된다. 이때 나 같은 경우 M1맥북이여서 아래와 같은 문제가 발생했었다.
zsh: command not found: brew
해결 링크: https://psip31.tistory.com/119
Homebrew의 경로가 잘못 설정되어 있어서 생기는 문제라고 한다.
해결방법은 아래와 같다.
vi ~/.zshrc
위의 문장을 터미널에 입력해서 해당 파일에 들어간 다음, 아래 문장을 적고 :wq로 저장하고 나오기
export PATH=/opt/homebrew/bin:$PATH
그리고 터미널에서 아래의 문장을 입력하고 엔터를 쳐서 코드 적용을 해준다.
source ~/.zshrc안드로이드 스튜디오 준비하기
우선, GraphQL 스키마 파일을 설치하기 위해서는 src/main/graphql 디렉토리를 생성해야 한다.
그리고 아래의 이미지대로 빌드그레이들을 설정하자.
여기서 맨 아래에 있는 코드에서 패키지명을 입력하는 것을 알 수 있는데,
build 디렉토리 아래 우리가 지정한 이 패키지 아래에 아폴로가 자동으로 생성하는 파일들이 추가된다.
그 다음, 다음 문장을 터미널에 입력하자.
./gradlew :app:downloadApolloSchema --endpoint='https://apollo-fullstack-tutorial.herokuapp.com/graphql' --schema=app/src/main/graphql/schema.graphqls그러면, app/src/main/graphql/schema.graphqls 아래에 해당 스키마 파일이 설치되게 된다.
스키마까지 설치된 다음에 sync now를 눌러서 그레이들을 적용시켜야 한다. 안그러면 에러난다.
그 다음은 Sandbox Explorer 사용법에 대한 설명이 길다. 이 내용은 튜토리얼을 참고해보면 좋을 것 같은데, 기본적인 쿼리의 개념과 필드의 개념에 대해 소개하며, Sandbox Explorer 라는 것을 통해서 GQL문장을 테스트해보고 미리 볼 수 있다는 것을 소개하고 있다.
https://www.apollographql.com/docs/kotlin/tutorial/03-write-your-first-query
쿼리문 추가하기
src/main/graphql/ 폴더 아래에 LaunchList.graphql이라는 이름의 파일을 추가하자. 여기서 파일 이름은 그냥 임의로 지은 것이니 바꿔도 된다.
그리고 아래의 GQL 쿼리문을 파일에 추가해라. 그리고 리빌드 꼭 하기 -> build디렉토리 아래에 코드가 자동 생성된 것을 알 수 있음.
팁: 안스에 GrpahQL 플러그인 설치하면 안스가 예뻐지고 사용하기 편해진다ㅎㅎ
query LaunchList {
launches {
launches {
id
site
}
}
}위 쿼리문으로 받을 Json객체를 파싱해서 받을 코틀린 응답 클래스들을 빌드 디렉토리 아래에서 확인해볼 수 있다.
ApolloClient 생성하기
val apolloClient = ApolloClient.Builder()
.serverUrl("https://apollo-fullstack-tutorial.herokuapp.com/graphql")
.build()이걸 작성해라. 여기서 지정한 url이 바로 GraphQL에서 사용될 유일한 서버의 엔드포인트다.
쿼리문 실행해서 실제로 응답 받기
val response = apolloClient.query(LaunchListQuery()).execute()레트로핏을 쓰다가 위 코드를 얼핏 보면, 왜 동기적인 함수인 excute()를 사용하지? 라고 생각할 수 있다. 하지만, 아폴로에서 excute는 suspend함수이고, 응답을 받기 전까지 중지시키므로 동기적일 것 같다는 그런 걱정은 하지 않아도 된다.
오히려 뷰모델 스코프 등에서 사용하기 쉽도록 잘 설계된 메소드라는 생각이 들었다.
여기까지 아폴로 라이브러리를 사용해서 GraphQL을 처음 적용해보기까지의 과정이였습니다. 튜토리얼 내용을 추후 더 따라해보면서 다음에 더 알아보도록 하겠습니다. 감사합니다.
참고
https://tech.kakao.com/2019/08/01/graphql-basic/
https://www.apollographql.com/docs/kotlin/tutorial/00-introduction
https://github.com/apollographql/apollo-kotlin
