티스토리 뷰

지난번에 [Express.js/Node.js] Express framework를 이용한 REST API 서버 만들기 에서 Express 프레임워크를 이용하여 REST API서버를 만들어 보았다. 

이번에는 Express 프레임워크와 Apollo Server를 이용해서 GraphQL API를 만들어보자.

GraphQL에 대해서는 GraphQL(Graph Query Language) 란? <= 여기서 한번 설명하였었다.

 

우선 작업환경에 node.js를 설치해 준 뒤 워크 스페이스를 세팅해주자.

mkdir {디렉토리 이름}
cd {디렉토리 이름}
npm init
//이후 나오는 세팅 값 전부 엔터쳐서 기본 세팅값으로 설정

워크 스페이스 세팅이 끝났다면 이제 익스프레스 프레임워크와 아폴로 서버를 사용하기 위한 디펜던시들을 설치해주자.

npm install express apollo-server-express compression body-parser-graphql

위와같이 제대로 설치가 끝이났다면 package.json 파일을 열어서 설치한 디펜던시들의 버전을 확인할 수 있다.

package.json

GraphQL API는 Schema와 Resolver에 작성 된 내용을 토대로 동작한다.

Schema에서는 GraphQL의 쿼리 가능한 필드들과 어떤 타입이 어떤 스칼라와 타입으로 구성되어 있는 지 확인 가능하며 resolver는 스키마가 쿼리될 때 작동하는 함수이며 Schema를 Database 등과 mapping 시켜주어 원하는 값을 반환할 수 있게 해준다.

 

스키마 작성법은 GraphQL 스키마 작성하기 (GraphQL Schema) 글을 읽어보면 도움이 될 것 같다.

 

우리는 schema와 resolver를 메인 스크립트에서 분리 시킬 것이므로, graphql_example 디렉토리 내부에 graphql이라는 디렉토리를 생성해준 뒤 내부에 schema.graphql 파일과 resolvers.js 파일을 생성해주자. 또 main 스크립트인 index.js도 graphql_example 디렉토리에 생성해주자.

잘 생성하였다면 디렉토리 구조는 다음과 같이 될 것이다.

 

자 이제 스키마와 리졸버를 작성해주자.

schema.graphql
resolvers.js

스키마를 작성하는 법은 위에 링크한 글에 설명이 되어있고 우리는 쿼리에 대한 데이터를 resolver를 통해 전달해 주어야 한다. resolvers.js에서는 데이터베이스 와 맵핑이 가능하지만 이 번 글에서는 간단하게 text로만 삽입을 하겠다.

이 때 Blog 타입에서 인자를 받는데 인자에 대한 처리는 주석으로 표기해놨으니 참고하여 작성하면 될 것 같다.

 

자 이제 index.js를 작성해주자

index.js

4번과 15줄의 compression은 express 환경에서 Gzip 압축을 통해 response 데이터 사이즈를 크게 줄여 성능을 향상시켜주는 미들웨어이다.

typeDefs와 resolvers 변수로 스키마와 리졸버를 읽어와서 ApolloServer를 통하여 GraphQL API를 Open하는 내용이 작성되어있다. 

21번째 줄부터 보면 endpoint는 /graphql으로 작성되어있다 (default값 역시 /graphql이다.)

우리는 GraphQL API에 호출할 때 {serverURL}:port/graphql로 쿼리를 하면 된다. [postman 등을 이용하여...] 

이 때 postman등으로 쿼리할 때 graphql 언어로 읽어야 하므로 bodyParserGraphQL을 사용한다.

 

또 해당 API를 open하면 playground를 이용하여 쿼리할 수 있다. 사용방법은 아까 호출주소를 그냥 웹브라우저를 통하여 접속하면 된다.

 

이제 {serverURL}:port/graphql 에 웹 브라우저를 통하여 접속해보자 (local에 띄웠다면 localhost:5555/graphql 이 될 것이다.)

 

url에 접속하면 이와같은 playground를 볼 수 있다. 가장 우측에 작게 표시 된 DOCS 탭을 눌러보자

이와 같이 내가 쿼리할 수 있는 목록이 나타나며 항목을 누르면 어떠한 타입으로 이루어져 있는 지 인자는 무엇인지 상세하게 나와있다. 사용자는 이와같은 DOCS와 SCHEMA를 참고하여 원하는 데이터베이스를 쿼리할 수 있다.

 

이런식으로 말이다.

이번에는 blogs 필드를 인자를 가지고 쿼리해보자. blog_name이 jason9319인 blog의 blog_name과 rank를 가져오고 싶다고 해보자.

다음과 같이 조건에 맞는 정보만 가져올 수 있다.

이번에는 인자에 이름 정보와 랭크 정보를 둘다 넣어주자

아까 resolver에서 정의하였듯 두가지 조건에 모두 맞는 정보만 가져온다.

이번에는 의도적으로 없는 인자 정보를 입력해보자.

반환할 수 있는 데이터가 없으므로 빈 배열을 반환하게 된다.

 

지금까지 Apollo server와 express를 이용하여 간단한 GraphQL API를 구현해보았다. 

댓글
댓글쓰기 폼