GraphQL API axios 활용 및 비동기 처리

이전 포스팅에서 GraphQL API 구축을 하였다

 

그 코드를 다시 리팩토링 하여 axios 밑 비동기 방식으로 변경하였다

 

그리고 두개의 쿼리를 작동시켜 데이터를 가져오는 방법을 확인 해보자

 

 

---

db.js

import axios from "axios";
const BASE_URL = "https://yts.am/api/v2/";        // 기본적인 api url을 지정하고 
const LIST_MOVIES_URL = `${BASE_URL}list_movies.json`;  
				// 그 다음은 기능적으로 필요한 url을 개별적으로 관리한다
const MOVIE_DETAILS_URL = `${BASE_URL}movie_details.json`;
const MOVIE_SUGGESTIONS_URL = `${BASE_URL}movie_suggestions.json`;

export const getMovies = async (limit, rating) => { 
			// async await는 자바스크립트의 비동기 처리 패턴중 가장 최근에 나온 문법으로
    const {          // 비동기처리 방식인 콜백함수와 프로미스의 단점을 보완하는 방법이다
        data: {
            data: { movies }
        }
    } = await axios(LIST_MOVIES_URL, {  // 기존  node-fetch를 axios로 변경하여 사용하였다
        params: {
            limit,
            minimum_rating: rating
        }
    });
    return movies;
};

export const getMovie = async id => {	// 영화한개의 정보를 가져오는 함수
    const {
        data: {
            data: { movie } 
        }
    } = await axios(MOVIE_DETAILS_URL, {
        params: {
            movie_id: id
        }
    });
    return movie;
};

export const getSuggestions = async id => { // 추천 영화 검색해서 가져온다
    const {
        data: {
            data: { movies }
        }
    } = await axios(MOVIE_SUGGESTIONS_URL, {
        params: {
            movie_id: id
        }
    });
    return movies;
};

---

 

위와 같이 변경하였다

 

이제 그에 맞게 스키마를 재정의 하자

 

 

---

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]!
}

---

 

 

스키마에 suggestions를 추가하여 쿼리를 호출할 수 있게 한다

 

---

resolvers.js

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

const resolvers ={
    Query: {
        movies: (_, { rating, limit }) => getMovies(limit, rating), 
        			// resolvers 함수는 스키마에 정의되어있는 쿼리의 함수들을 참조한다
        movie: (_, { id }) => getMovie(id),                     
        			// resolvers 함수에 db의 함수를 참조하여 추출 데이터를 가지고 오게된다
        suggestions: (_, { id }) => getSuggestions(id)      
        			// Query의 키들은 직접적인 쿼리문을 호출할때 사용한다
    }
};

export default resolvers;

---

 

나머지 파일들은 기존 셋팅과 동일하며

 

변경된 코드들을 실행을 하게 된다면 밑에와 같이 출력이 된다

 

 

 

 

 

이렇게 변경한 코드로 React를 적용하여 만들어보자!

 

 

 

 

 

2020/06/26 - [GraphQL/GraphQL 활용 서버구축 실습] - GraphQL API로 데이터 정보 가져오기

GraphQL API로 데이터 정보 가져오기