[GraphQL] GraphQL API 제작 #2

☘️ 시작하며...

지난 게시물에서 GraphQL에 대해 알아보고 테스트 하였고, 이번에는 직접 GraphQL API를 만들어 볼 것이다.

 

해당 게시물은 노마드코더 강의를 참고하여 작성했다.(무료 강의)

GraphQL로 영화 API 만들기 – 노마드 코더 Nomad Coders

 

---

 

☘️ GraphQL API 만들기 초기 세팅

Apollo Server 란?

Apollo 서버란 GraphQL API를 사용하는 서버를 개발할 수 있도록 도와주는 패키지 이다.

 

프로젝트 생성

비주얼 스튜디오에서 원하는 이름의 디렉토리를 만들고

node.js 프로젝트를 초기화하는 명령어를 입력해 준다.

npm init -y

그리고 apollo server와 graphQL 패키지를 설치해 준다.

npm i apollo-server graphql

코드를 수정하면 바로 변경사항을 반영하여 node.js를 자동으로 다시 시작해 주는 nodemon을 설치한다.

 npm i nodemon - D

그리고 server.js 파일을 새로 만들어 준다.

touch server.js

마지막으로 package.json에서 아래와 같이 수정하여,

npm run dev 명령어를 실행하면 nodemon server.js 명령어가 실행되어, server.js 파일을 실행하고, 파일이 변경될 때마다 서버가 자동으로 다시 시작된다.

그리고 import 형식으로 모듈을 가져오기 위해 package.json 아래에 해당 코드를 추가한다.

그러면 GraphQL API를 만들 수 있는 환경이 된다.

 

☘️ GraphQL API 스키마 만들기

server.js 에서 다음과 같이 코드를 작성해 서버를 실행한다.

npm run dev

하지만 GraphQL에 대한 루트 쿼리나 데이터 타입이 없어 오류가 발생한다.

그래서 GraphQL에 대한 스키마를 정의하고 해당 스키마를 서버 설정에 추가해야 한다.

 

스키마에 대한 구성은 아래 페이지에서 직접 GraphQL를 사용해 보면서 익힐 수 있다.

SWAPI GraphQL API

 

Query 타입 생성

Rest API에서 GET요청을 통해 모든 게시물을 가져오는 Query를 만들어 볼 것이다.

Apollo 서버를 생성할 때, typeDefs로 정의된 스키마를 서버 설정으로 전달한다.

 

typeDefs는 GraphQL 스키마를 정의한다. 참고로 정의할 때엔 " 나 ' 를 사용하지 않고 `(백틱)을 사용해야 한다.

 

다음과 같이 root query에는 allPosts와 post가 있으며, type을 설정하였다.

그러면 allPosts는 Rest API에서 GET /api/v1/posts 처럼 모든 게시물을 불러오는 api가 되며, 

요청을 하면 배열 안에 id, text, author 가 있는 Post 타입이 된다.

 

반면 post는 Post 타입이며, argument로 id 값을 같이 보내준다.

그러면 Rest API 에서 GET /api/v1/post/:id 처럼 id 값을 가진 게시물 한 개를 불러오는 api가 된다.

 

서버를 실행하고 http://localhost:4000 에 들어가고 Query your server를 클릭하면 내가 만든 Query를 볼 수 있다.

내가 코드로 만든 쿼리를 볼 수 있고 실행시킬 수 있다.

이처럼 Query 타입은 Rest API의 GET과 같이 데이터를 요청하여 받을 수 있다.

그러면 Rest API의 POST, PUT, DELETE 등은 어떻게 요청을 할까?

 

Mutation 타입 생성

Rest API의 POST, PUT, DELETE와 같은 HTTP Method를 사용하기 위해

Mutation 타입을 아래 코드처럼 만들 수 있다.

그러면 HTTP Method의 POST 와 같이 게시물을 작성하는 postPost를 만들어,

text와 userId를 넘겨주어 Post 타입을 리턴값으로 받게 하였다.

 

그리고 HTTP Method의 DELETE와 같이 게시물을 삭제하는 deletePost를 만들어,

게시물의 id값을 넘겨주어 불린 값을 리턴으로 받게 하였다.

 

그러면 Root에 query 이외에 mutation이 생긴 것을 볼 수 있고 직접 테스트를 해 볼 수 있다.

 

Nullable Fields

위에 사진을 보면 요청해서 return 받은 값을 보면 null값을 받는 것을 볼 수 있다.

그러나 다음과 같이 ! 느낌표를 붙이고 다시 API를 실행해 보면

다음과 같이 값으로 null 아닌 error가 나는 것을 볼 수 있다.

 

왜냐하면 GraphQL은 ! 느낌표를 붙이지 않으면 자동으로 아래와 같이 null 타입도 된다고 받아들이는 Nullable Field가 된다.

그래서 ! 느낌표를 붙이면 null 타입으로 받아들이지 않는 필수(required)가 되는 Non-Nullable Field 가 되어,

위에 실행 결과처럼 해당 내용에 값이 없는 null인 상태를 타입 에러로 받아들이게 된다.

 

☘️ GraphQL API Resolver 만들기

지금까지 스키마를 정의하여 필드를 만들었다.

그러면 해당 스키마 필드에서 사용되는 함수의 실제 행동을 정의하기 위해 Resolver를 만들어야 한다.

참고로 resolver는 typeDefs에서 정의했던 이름과 똑같이 작성해야 한다.

위와 같이 코드를 작성하고 hello 를 요청하면 리턴 값으로 'world' 라는 문자열을 받은 것을 볼 수 있다.

터미널 창에서도 '호출됨!' 이 찍히게 된다.

Resolver 만들기 - Query

본격적으로 allPosts, post, allUsers 에 대한 Resolver를 만들기 위해 posts와 users 데이터를 만들어 준다.

그리고 resolvers를 만들어 allPosts, allUsers 에서 각각 posts와 users를 리턴해준다.

그러고 allPosts와 allUsers를 요청하면 아래 사진과 같이 나오는 것을 볼 수 있다.

다음으로 특정 id 를 가진 게시물을 가져오는 post를 만들어 볼 것이며,

post의 타입은 아래와 같이 생겼으며 인자로 id값을 넘겨주어야 한다.

post(id: ID!): Post

Resolver의 인자값은 root, argsr가 있는데, 다음과 같이 코드를 작성하고 post를 호출하면

호출할 때, 인자로 같이 넣었던 id값이 args에 들어 있는 것을 확인했다.

그러면 args에 있는 id를 사용해서 특정 게시물을 불러오면 된다. 

그래서 아래와 같이 코드를 작성해서 호출할 때 넣어준 id값과 같은 id값을 가진 것을 호출해 준다.

그러면 다음과 같이 id값에 따른 게시물을 가져올 수 있게 되었다.

Resolver 만들기 - User, Post 타입

typeDef를 보면 Post에는 User 타입의 author가 있고, User에는 fullname이 있는 것을 볼 수 있다.

모든 post 데이터에 User 정보를 넣기엔 번거롭고 User에서도 fullname을 적어주기 번거로워 Resolver에서 타입을 만들어 준다.

resolver 안에 Post를 만들고 인자에 있는 root를 출력하게 코드를 작성하고

post를 호출하면 root에서 리턴 받은 post의 데이터가 있는 것을 볼 수 있다.

그래서 root를 사용해서 다음과 같이 타입을 정의해 반환해 준다.

그러면 post를 호출했을 때, 원하는 게시물과 그 게시물을 작성한 사용자의 정보를 리턴 받을 수 있게 되었다.

Resolver 만들기 - Mutation

다음으로 HTTP POST, PUT, DELETE 요청과 같은 Mutation에 대한 Resolver를 만들 것이다.

위에서 활용한 args로 글 작성과 삭제를 구현한다.

그럼 이렇게 해서 GraphQL을 사용해서 GET, POST, DELETE 를 만들어 보았다. 

 

---

 

☘️ 마무리 하며...

지난번에 GraphQL에 대해 알아보고, 직접 API를 만들어 보았다.