[GraphQL] GraphQL 실제 사용(서버 설정)

1. API 구성 

[Spring boot RESTful + Graphql]

간단한 사용 테스트이기 때문에 DB는 설정하지 않았다. 

 

2. 사용한 라이브러리 (4개)

implementation 'com.graphql-java:graphql-spring-boot-starter:5.0.2'
implementation 'com.graphql-java:graphql-java-tools:5.2.4'
implementation("com.graphql-java-kickstart:graphiql-spring-boot-starter:5.10.0")

implementation 'io.leangen.graphql:graphql-spqr-spring-boot-starter:0.0.4' 

각 라이브러리가 무슨 기능을 가지고 있는지...는 솔직히 안찾아봤다. (이러면 안되는데, 설정 검색해보면서 하나하나 해보니까 까먹었다.)

 

* RESTful API와 Graphql을 동시에 사용하고, graphql 파일을 통한 통신 방식은 읽기 힘들어서 

io.leangen.graphql 라이브러리를 추가했다. 이 객체를 통해 graphql파일이 아닌 자바 객체를 사용해서 graphql api를 작성할 수 있다.

 

* API를 바로바로 사용해볼 수 있도록 com.graphql-java-kickstart 라이브러리를 추가했다. 이건 하단에 스크린샷을 붙일 것이다. 

 

* 처음엔 이게 옳은 방법인가, 너무 가라치는 것 아닌가 고민했는데 이 라이브러리도 Graphql 공식 라이브러리인거 보고 그냥 사용하기로 했다. 

 

3. 서버 구성 

Controller, Service, ServiceImpl 구성 방식의 MVC2 RESTful api를 기본으로 구성하였다.

그림 1. Service 코드

그림 2. 객체

4. 소스코드 

* [그림 1] 에서 Controller와 PostService는 각각 RESTful API endpoint와 서비스 코드 문서화(인터페이스) 객체니까 넘어가겠다. (Graphql을 공부하는 시점에서 RESTful와 MVC2 구조를 사용할 줄 안다고 가정하겠다.)

 

그럼 [그림 2]부터 보자.

그림 3. Post 객체 구성. 하단에는 Getter/Setter가 생략된 상태다. 사진 길어짐

VO(Variable Object) 혹은 DTO(Data Transfer Object)라고도 하는 변수형 객체다. 

특이한 점이 있다면 @GraphQLQuery Annotation이다. 저것이 2번에서 언급한 io.leangen.graphql에 포함된 기능이다. 

Graphql로 Post 데이터의 하위 id/temp/number 변수값들을 질의할 때 사용하게 된다. 쿼리와 자바 변수 사이의 맵핑(Mapping)단계라고 생각하면 된다. 

 

다음은 [그림 1]을 보자.  

그림 4. 서비스 로직 객체.

상단의 @Service annotation이 있는 것을 보면 알겠지만, 서비스 로직이 들어가는 ServiceImpl 객체다. 

그리고 그 아래에 있는 '@GraphQLApi'가 바로 Graphql의 대표적인 장점인 '단일 endpoint'의 기능이다. 

그림 5. 서비스 로직 method. 위에 DB 안썼다고 분명히 말했다. 함수명은.... 그냥 복붙하다가 들어갔다 무시하셈.

[그림 5]에서 가장 먼저 봐야할 것은 @GraphQLQuery annotation이다. 

기능은 이름 그대로 Graphql query 기능이다. (query는 데이터 조회를 위한 루트 타입이다. 맞나?)

query의 명칭(이름)은 "post"고 반환 타입은 자바 객체로 명시된 것 처럼 "Post"다. 

즉 이건

query {

    post{

        id,

        type

    }

}

이라고 요청하면

query { // 조회용 쿼리 

    post{ // [그림 5] name = "post"

        id, // [그림 3] name = "id"

        type // [그림 3] name = "type"

    }

}

로 인식하여 값을 내려주겠다는 것이다. 

 

api를 통한 parameter 전달과 데이터 수정(mutation) 호출은 다음 글에 작성하는 것으로 하고, 일단 돌아가는 것을 넣어두겠다. 

 

라이브러리 설명 구간에 올려놓은 graphiql을 사용할 것이다. 

서버를 실행하게 되면, kickstarter 라이브러리가 알아서 localhost:8080/graphiql 페이지를 생성한다. (페이지는 직접 열어라)

 

그림 6. 이렇게 나온다. 구글에서 예제를 찾아보면 node.js express 환경이 많아서 그런가 시퍼런 페이지가 대부분인데 자바는 하얗더라. 하양이 최고지 시퍼렁 놈들 ㅉㅉ

매우 감사하게도 쿼리의 자동 완성이 매우 잘 지원된다. ctrl + space bar 연타하며 아주 바람직하다고 느끼게 된다. 

[그림 6]에서 우측 상단에 Docs를 눌러보자. 

 

그림 7. Docs(문서) 탐색기

Docs(문서) 탐색기가 나온다. 자바 개발자라면 JavaDocs를 통한 문서 자동 생성을 써봤을 수 있다. 그것과 비슷하다고 생각하면 된다. 

 > ROOT TYPES의 query: Query를 눌러보자. 

그림 8. query api의 목록이 있다!

그림 9. api중 post를 눌러보았다. 

api를 타고 들어가면 하위 객체의 상세 구성을 볼 수 있다. 

그럼 이제 query 를 호출해보자. 

그림 10. 왼쪽이 조회용 쿼리, 우측이 반환 데이터다. 

자동 완성의 위력으로 쉽게 작성할 수 있고, api의 반환값을 쉽게 조회할 수 있다. (아주 좋소!)

 

* 여담 

이런 젠장 써보는게 알아보기 쉬울 것 같아서 구성을 시작했는데 생각보다 시간 개잡아먹음 젠장.