[GraphQL] GraphQL 시작하기 - 5 (Api 연결)

그래프 큐엘에 대한 강의를 듣고 실제 코딩 후 기록을 위해 블로그에 남기고 있는데요.

Graph QL - 1

[GraphQL] GraphQL 시작하기

Graph QL - 2

[GraphQL] GraphQL 시작하기 - 2 (Query with parameter)

Graph QL - 3

[GraphQL] GraphQL 시작하기 - 3 (Mutation)

Graph QL - 4

[GraphQL] GraphQL 시작하기 - 4 (Mutation - delete)

 

이렇게 1 ~ 4 까지 진행해보았고 기본적인 Query, Mutaion, resolvers, scheme 등에 대하여 포스팅 해봤습니다.

오늘은 마지막 시리즈로 실제 API 에 연결해보겠습니다.

제가 사용할 API 는 영화 정보를 가져오는  API인데요.

- https://yts-proxy.now.sh/list_movies.json
- https://yts-proxy.now.sh/movie_details.json?movie_id={}

영화 리스트를 가져오는 API와 영화 상세 정보를 가져오는 API 두가지를 사용해 보겠습니다.

먼저 스키마 부터 정의해보겠습니다.

graphql.scheme

type Query {
  people: [Person]!
  person(id: String!): Person!
  movies(limit: Int, rating: Float): [Movie]!
  movie(id: Int!): Movie!
}

type Mutation {
  addPerson(name: String!, age: Int!, gender: String!): Person!
  deletePerson(id: String!): Boolean!
}

type Person {
  id: String!
  name: String!
  age: Int!
  gender: String!
}

type Movie {
  id: Int!
  title: String!
  summary: String!
  rating: Float!
}

 

그 다음 이에 맞는 resolvers를 구현해보겠습니다.

resolvers.js

const { getPeople, getPerson, addPerson, deletePerson } = require('../dummy/people');
const { getMovies, getMovie } = require('../controller/test-movie.controller');

const resolvers = {
    Query: {
        people: () => getPeople(),
        person: (_parent, { id }) => getPerson(id),
        movies: (_parent, { limit, rating }) => getMovies(limit, rating),
        movie: (_parent, { id }) => getMovie(id),
    },
    Mutation: {
        addPerson: (_parent, { name, age, gender }) => addPerson(name, age, gender),
        deletePerson: (_parent, { id }) => deletePerson(id)
    }
}

module.exports.resolvers = resolvers;

 

컨트롤러 모듈을 구현해 보겠습니다. 위에서는 test-movie.controller가 되겠죠?

test-movie.controller.js

const axios = require('axios');

const BASE_URL = "https://yts-proxy.now.sh/";
const LIST_MOVIES_URL = `${BASE_URL}list_movies.json`;
const MOVIE_DETAILS_URL = `${BASE_URL}movie_details.json`;
const MOVIE_SUGGESTIONS_URL = `${BASE_URL}movie_suggestions.json`;

const getMovies = async (limit, rating) => {
  const res = await axios.get(LIST_MOVIES_URL, {
    params: {
      limit,
      minimum_rating: rating,
    }
  });
  const { movies } = res.data.data;

  return movies
};

const getMovie = async (id) => {
  const res = await axios.get(MOVIE_DETAILS_URL, {
    params: {
      movie_id: id,
    }
  });

  const { movie } = res.data.data;

  return {
    ...movie,
    summary: movie.description_full
  }
};

module.exports.getMovies = getMovies;
module.exports.getMovie = getMovie;

 

이런식으로 resolvers 에 맞는 함수들을 정의해주고 함수 안에서는 axios 모듈을 이용하여 api 콜을 진행하였습니다.

이런식으로 movies를 가져 올 수 있고 movie 상세를 가져올 수 있게 됩니다.

여기서 주의할 점은 movie query를 날릴 때에 api 상에서는 summary라는 프로퍼티가 존재하지않습니다.

따라서 컨트롤러 단에서 movie 에 description_full 을 summary 프로퍼티로 변경 해주어서 query가 원하는 값을 맞춰줘야 제대로 동작하게 됩니다.

앞으로 저는 제가 실제 api를 만들어 볼 생각인데요. 현재 영화 정보를 가져오는 서비스를 제작 중에 있는데 이를 그래프큐엘로 구성해볼 생각입니다.

각각의 정보들을 크롤링 할 생각이고 크롤링 한 모듈을 AWS Lambda에 올려서 api를 구성 한 뒤, 서버 쪽을 그래프큐엘로 구현하여 각 API를 콜해 볼 생각입니다. 이러한 방향성을 가지고 그래프큐엘 프로젝트를 진행해 볼 생각인데, 기회가 되면 포스팅도 이어가보도록 하겠습니다.

정말 쉽고 빠르게 서버를 구축할 수 있는것 같고, REST API 를 구현하기 위한 여러가지 작업들이 많이 생략되어서 조금 더 클라이언트에 맞는 라이브러리? 가 되지 않을까 싶네요.

조금 더 깊게 써보고 속도나 이런측면도 고민해 봐야겠네요.