GraphQL과 YTS API 사용하기 (2)

지난 글에서 작성한 YTS API 사용에 이어,
좀 더 세분화된 기능을 추가해본다.

1. db.js
   기존에 사용하던 fetch는 사용하기 불편하여 axios를 사용해본다.
   axios는 request 시 endpoint 지정을 params라는 명칭으로 정의하여 요청할 수 있다.

import axios from "axios";
const BASE_URL = "https://yts.lt/api/v2/";
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`;

// 해당 조건의 영화 목록 불러오기
export const getMovies = async (limit, rating) => {

// axios 요청에 대한 응답은 data라는 이름의 객체 형태이기 때문에 아래와 같이 정의하여 사용한다.
  const {
    data: {
      data: { movies }
    }
  } = await axios(LIST_MOVIES_URL, {
    params: {
      limit,
      minimum_rating: rating
    }
  });
  return movies;
};

// 해당 id의 영화 정보 불러오기
export const getMovie = async id => {
  const {
    data: {
      data: { movie }
    }
  } = await axios(MOVIE_DETAILS_URL, {
    params: {
      movie_id: id
    }
  });
  return movie;
};

// 해당 id의 영화 목록 불러오기
export const getSuggestions = async id => {
  const {
    data: {
      data: { movies }
    }
  } = await axios(MOVIE_SUGGESTIONS_URL, {
    params: {
      movie_id: id
    }
  });
  return movies;
};

2. resolvers.js
   getMovies, getMovie, getSuggestions 기능을 사용하기 위해 적용해주자.

import { getMovies, getMovie, getSuggestions } from "./db";

const resolvers = {
  Query: {
    movies: (_, { limit, rating }) => getMovies(limit, rating),
    movie: (_, { id }) => getMovie(id),
    suggestions: (_, { id }) => getSuggestions(id)
  }
};

export default resolvers;

3. schema.graphql
   스키마 쪽은 이전과 크게 다른 부분은 없다.

   type Movie {
   id: Int!
   title: String!
   rating: Float
   description_intro: String
   language: String
   medium_cover_image: String
   genres: [String]
   }
   
   

type Query {
movies(limit: Int, rating: Float): [Movie]!
movie(id: Int!): Movie
suggestions(id: Int!): [Movie]!
}

여기까지의 글로 Graphql의 API 구성이 끝났다.
잘 만들어진 API도 사용해줄 클라이언트, 프론트엔드가 없으면 무용지물일 것이다.

다음 글부터는 GraphQL의 클라이언트인 Apollo로 API를 사용하는 앱을 만들어 본다.