[GraphQL] Movie API 만들기(5)-Wrapping

bomhada·2022년 5월 8일
0

GraphQL

목록 보기
5/5
post-thumbnail

👾 REST API를 GraphQL로 연결

영화 오픈 API를 통해 정보를 가져오도록 하겠습니다.

준비

axios 설치

npm i axios

영화 API 링크

https://yts.mx/api/v2/list_movies.json

db.js

import axios from "axios";

const BASE_URL = "https://yts.mx/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) => {
  const {
    data: {
      data: { movies }
    }
  } = await axios(LIST_MOVIES_URL, {
    params: {
      limit,
      minimum_rating: rating
    }
  });
  return movies;
}

export const getMovie = async id => {
  const {
    data: {
      data: { movie }
    }
  } = await axios.get(`${MOVIE_DETAILS_URL}?movie_id=${id}`);
  return movie;
};

export const getSuggestions = async id => {

  const {
    data: {
      data: { movies }
    }
  } = await axios.get(`${MOVIE_SUGGESTIONS_URL}?movie_id=${id}`);
  return movies;
}
  • 영화를 받기위한 url을 상수로 선언해줍니다.
  • axios를 사용하여 api를 GET해줍니다.
  • params: limit, rating을 넣어준 이뉴는 schema에 지정해주었기 때문입니다.
data: {
  data: { movie }
}
  • es6 비구조화할당을 통해 위처럼 표현이 가능합니다.
  • const movies = data.data와 같습니다.

schema.js

import { buildSchema } from "graphql";

const schema = buildSchema(`
  type Movie {
    id: Int!
    title: String!
    year: Int!
    rating: Float!
    runtime: Int!
    description_full: String!
    language: String!
    medium_cover_image: String!
  }

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

export default schema;
  • 영화 api 링크를 확인하여 사용할 정보와 그 타입들을 작성해줍니다.

resolvers.js

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

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

export default resolvers;

REST API의 영화 데이터를 GraphQL-yoga로 연결하였습니다.
이제 영화 웹앱을 만들 준비가 되었습니다.

0개의 댓글