6. 영화 API GraphQL : Query, Mutation 요청해보기

참조

Nomad Coders의 무료 강의 'graphQL로 영화 API 만들기'를 참고하였다.

nomadcoders.co/graphql-for-beginners

 

 

---

지난 글

graphQL의 구조, 원리에 대한 설명글을 이해하고 난 뒤에 아래 실습 내용을 살펴보자

5. 영화 API GraphQL : 구조, 원리 파악하기

 

 

---

실습하기

 

npm start 또는 yarn start를 통해 Server를 실행시키고, localhost:4000 으로 접속하여 graphql playground를 실행한다.

 

우측 그림과 같이 여러 개의 Tab을 만들어서 Query문을 날릴 수 있다.

첫번째 tab은 "Q" 라고 적혀 있는데, 실제 query문에 query type을 적어놨기 때문이고,

두번째 tab은 "M" 이라 적힌 걸 볼 수 있다. Mutation type을 요청했기 때문이다.

 

 

---

 

Query

 

query문을 날리면 우측과 같이 movies DB 정보를 가져오는 것을 볼 수 있다.

 

원래 REST API에서는 movies와 같은 객체 안의 정보(id, name, score) 등이 무엇인지를 gitbook과 같은 문서로 표기하여 API를 공유한다. 이 문서를 참조하면서 작업을 해야되는 것이다.

 

그러나 graphQL에서는 graphql-playground의 DOCS와 SCHEMA tab을 바로 확인할 수 있다. (화면 우측)

 

아래와 같이 DOCS 에서는 resolver가 어떻게 작성되어 있는지 알 수 있고, SCHEMA에서는 schema의 작성된 형태를 볼 수 있다. 따라서 이에 맞게 query, mutation 문을 작성하면 되므로 편리하다.

 

예를 들어 조회를 위해 query 문을 작성한다면, query : { movies } 로 요청할 수 있다. 그런데 movies는 [Movie]라는 배열을 필수로 요청하므로 query: { movies : { id, name... } } 으로 요청해주어야만 정상적인 응답을 받을 수 있는 것이다.

 

---

 

Mutation

 

schema에 맞게 mutation 요청을 날리면 우측 화면에서 "data" 안에 정보가 추가되었다는 것을 확인할 수 있다.

 

이후 다시 query문을 날리면 movies 객체가 업데이트 되었음을 볼 수 있다.

 

다만, movies 객체는 실제 DB가 아니라 db.js에 작성한 객체일 뿐이기 때문에 서버 종료 후 다시 query 요청을 날려보면 추가했던 새로운 영화 정보는 사라진다.

 

이후에 실제 DB에 연결하는 방법을 공부해야겠다!