GraphQL movieql

링크텍스트(graphql이란?)

Schema?

It describes the functionality available to the client applications that connect to it.

Resolver?

Resolver is a collection of functions that generate response for a GraphQL query. In simple terms, a resolver acts as a GraphQL query handler. Every resolver function in a GraphQL schema accepts four positional arguments as given below −

fieldName:(root, args, context, info) => { result }

Setting

npm init **package.json**
npm add graphql-yoga **GraphQl 프로젝트를 빠르게 시작할 수 있다.**
npm install -g nodemon
git init
git remote add origin https://github.com/Coaspe/movieql **git 연결**
git pull origin main
npm add -g babel-cli
npm add babel-cli babel-preset-env babel-preset-stage-3

package.json =>

  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1",
    "build" : "tsc -p .", **typescript compile**
    "start" : "nodemon"  **npm start => nodemon 실행**
  },

graphql Setting => Quick start
Schema는 사용자에게 보내거나 사용자로부터 받을 data에 대한 설명이다.
Query는 Database에게 문제 같은 것이다.
그래서 이 Query를 어떤 방식으로 resolve 해야한다.

schema.graphql

schema는 대충 어떤 값들을 받아 올 것이다 라고 정의를 내리는 것이다.

type name {
    받아올 data : 자료형
}

type Query { ! type Query에 있는 것들을 !
  movies(limit: Int, rating: Float): [Movie]!
  movie(id: Int!): Movie
  suggestions(id: Int!): [Movie]!
}

type Movie { ** 새로운 자료형으로도 사용이 가능하다. **
  id: Int!
  title: String!
  rating: Float
  summarty: String
  language: String
  medium_cover_image: String
  genres: [String]
  description_intro: String
}

db.js

데이터를 어떻게 가져올지 정의한다.

import axios from "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`;

export const getMovies = async (limit, rating) => {
  const {
    data: {
      data: { movies }
    }
  } = await axios(LIST_MOVIES_URL, {
    **! movies = data.data.movies와 같은 것이다. !**
    params: {
    **! axios로 넘겨줄 파라미터들이다. !**
      limit,
      minimum_rating: rating
    }
  });
  return movies;
};
**! arguments로 영화 수의 제한과 평점을 받아서 API로 넘긴 후에 조건에 맞는 영화들을 받아오는 함수이다. !**

export const getMovie = async id => {
  const {
    data: {
      data: { movie }
    }
  } = await axios(MOVIE_DETAILS_URL, {
    params: {
      movie_id: id
    }
  });
  return movie;
};
**! argument로 영화의 고유 ID를 받아서 파라미터로 넘긴 후에 일치하는 영화를 받아오는 함수이다. !**

export const getSuggestions = async id => {
  const {
    data: {
      data: { movies }
    }
  } = await axios(MOVIE_SUGGESTIONS_URL, {
    params: {
      movie_id: id
    }
  });
  return movies;
};
**!argument로 넘긴 ID와 연관된 영화를 return하는 함수이다.!**

resolvers.js

정확히 무엇을 data로 넘겨줄 것인지 정의한다.

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;

좋은 웹페이지 즐겨찾기