귤귤의 대모험

이전 포스팅에서 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를 통해 정보를 가져와보자

우선 index.js에 GraphQL를 활용해서 서버를 구축하고 맵핑을 시작하자

이것은 이전포스팅과 동일하지만 다시한번 작성해보자

index.js

import { GraphQLServer } from "graphql-yoga";
import resolvers from "./graphql/resolvers"

const server = new GraphQLServer({
    typeDefs: "graphql/schema.graphql", // 스키마정의가 되어있는 곳을 Defs로 둔다
    resolvers   // 결과 값을 실행할곳을 성정한다 단지 이 4줄로 끝이다
});

server.start(() => console.log("Graphql server Running"));

그리고 가져올 영화 정보가 어떤 타입인지 지정해주어야한다

영화정보를 가져올때 어떠한 형식인지 지정해주어야 하는것이다

schema.graphql

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

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

그리고 db.js를 만드는데 여기서는 오픈 API를 연결한다

db.js에는 url주소가 필요하며 그리고 url에 쿼리스트링이 있다면 그 쿼리스트링을 동적으로 변수처리해서 

조건을 변경할 수 있다

db.js

import fetch from "node-fetch";
const API_URL = "https://yts.am/api/v2/list_movies.json?";

// Node.js에서 fetch를 할때 필요하다 node-fetch를 설치하자

export const getMovies = (limit, rating) => {
    let REQUEST_URL = API_URL;
    if (limit > 0) {
        REQUEST_URL += `limit=${limit}`;
    }
    if (rating > 0) {
        REQUEST_URL += `&minimum_rating=${rating}`;
    }
    return fetch(REQUEST_URL)
      .then(res => res.json())
      .then(json => json.data.movies);
}

그리고 resolvers.js를 만들어서 Query문을 작성해서 오픈API에서 가져올 정보를 핸들링할 수 있다

 resolvers.js

import { getMovies } from "./db";

const resolvers ={
    Query: {
        movies: (_, { rating, limit }) => getMovies(limit, rating)
    }
};

export default resolvers;

이러한 결과는 아래와 같이 나오게된다

다음 포스팅은 더 많은 데이터 조작을 하고 여러가지 함수활용을 해보겠습니다!

REST API가 아닌 다른방식으로 데이터를 가져올 수 있다

그것은 페이스북에서 개발하고 사용하는 GraphQL이다 

이 방법은 URL이 필요없으며, 당연히 Parameter도 필요없다

그말 즉슨, form-data와 body-parse하는 모든 과정들이 필요가 없어진다 

이 하나만으로도 엄청난 장점일 수밖에 없다

이전 페이지에서 셋팅법을 소개 하였고 그 것을 조금 따라해본다면 쉽게 결과물을 가져올 준비가 되었을 것이다

스키마 정의 즉 데이터 가져올 타입과 데이터의 일부분만 가져올 수 있게 형식도 지정하게된다

// File:schema.graphql
type Person {
    id: Int!
    name: String!
    age: Int!
    gender: String!	// ! 느낌표의 의미는 필수항목의 의미이다
}                   

type Query {       
    people: [Person]!          // people은 많은 Person을 포함하고있다라는 뜻으로 배열로 묶어준다
    person(id: Int!): Person!  // person의 누구를 찾을것인지 함수와 비슷한 형식을 지정해준다
    						   // 그리고 ':' 뒤에는 리턴되는 형식이 Person이라고 지정한다
}

즉, type을 지정하여 그 객체인 Person을 불러올 때 
person(id: 1){
  name
} // 라고만 하면 id 1에 해당하는 person에 이름을 가지고 오게된다

/*
또한, 간단한 정의는 Query(질문을)를 resolve(해결하는) 함수를 만드는거라고 생각하면된다
그것은 Query라는 타입으로 질문의 타입을 정의하고 그 데이터 형식(타입)을 지정한다
지금은 type Query, type Person이라는 것이다

그리고 이 모듈은 index.js를 생성하면서 GraphQL을 생성할때 Query와 resolvers를 같이 맵핑하여
서버를 구축하게된다
*/

이렇게 스키마 정의를 하고 데이터를 어떻게 받을지 어떻게 가공할지에 대한 형식을 정해

우리는 데이터 받을때 형식과 폼을 맞추지 않아도 된다는 것이다

그럼 두 번째로는 이 형식에 맞게 데이터를 조작할 함수를 생성한다

// File: resolvers.js
import { people, getById } from './db';
const resolvers = {
    Query: {
        people: () => people, 
        person: (_, { id }) => getById(id) 
    }                           
}

export default resolvers;

// 이 resolvers 파일은 schem에 정의되어있는 형식과 타입에 맞춰 우리는 쿼리를 사용할 수 있다

이렇게 만들어진 두개의 파일은 API서버를 생성할때

아래와 같이 정의하여 생성하게된다

// File: index.js

import { GraphQLServer } from "graphql-yoga";
import resolvers from "./graphql/resolvers"

const server = new GraphQLServer({
    typeDefs: "graphql/schema.graphql", // 스키마정의가 되어있는 곳을 Defs로 둔다
    resolvers   		// 결과 값을 실행할곳을 성정한다 단지 이 4줄로 끝이다
});

server.start(() => console.log("Graphql server Running"));

// API서버를 만들기 위해서는 위와같이 두가지사항을 정의한다
// 정의되는 사항은 파일경로 import 해온 정보들을 저장한다

그리고 데이터를 정의하여 연습을 진행하자

// File: db.js
export const people = [
    {   
        id: 0,
        name: "Jisu",
        age: 18,
        gender: "female"
    },
    {
        id: 1,
        name: "Deal",
        age: 18,
        gender: "female"
    },
    {
        id: 2,
        name: "JD",
        age: 18,
        gender: "male"
    },
    {
        id: 3,
        name: "Japan Guy",
        age: 18,
        gender: "male"
    },
    {
        id: 4,
        name: "Nicolas",
        age: 18,
        gender: "female"
    },
];

export const getById = id => {
    const filteredPeople = people.filter(person => person.id === id);
    return filteredPeople[0]
}

// db에 우선에서 getById를 함수를 만들어서 데이터를 가공을 한다
// 그 결과를 리턴값으로 돌려준다
// 그 값을 받는 곳은 getById()를 사용하는 곳이다

db에 간단한 getById 함수를 선언하여 해당하는 id를 사용하는 사용자정보를 구해올 수 있게 한다

아래의 사진은 http://localhost:4000/으로 어떻게 데이터가 오는지 확인할 수 있다

이렇게 기본기를 만들어 보았다

앞으로 무비앱을 만들기위한 기본 토대가 될것이다

프로젝트 만들 폴더를 만들고 그 안에서 yarn init 레퍼지토리 등등 설정을 하고

code . ---> vscode를 열수 있음

지금 현재 폴더에서 vscode 들어가서

git init .

git remote add origin https://github.com/nomadcoders/movieql

git pull origin master

yarn add graphql-yoga

yarn global add nodemon

.babelrc 파일을 만들어서 바벨을 설치 한다

//File: .babelrc

{

"presets": ["env", "stage-3"]

}

yarn add babel-cli babel-preset-env babel-preset-stage-3 --dev

추가적으로 바벨의 설치한다

//File: package.json

{
  "name": "movieql",
  "version": "1.0.0",
  "description": "Movie API with Graphql",
  "main": "index.js",
  "repository": "https://github.com/paradox1107/movieql",
  "author": "Nicloas Serrano Arevalo<nico@nomadcoders.co>",
  "license": "MIT",
  "dependencies": {
    "graphql-yoga": "^1.18.3"
  },
  "scripts":{
    "start": "nodemon" // index.js 파일을 주시하게된다. yarn start 할때마다 nodemon이 활성화된다
       // nodemon은 파일을 수정할때마다 서버를 재시작해줄것이다
  },
  "devDependencies": {		// 바벨을 설치하고 나면 아래의 4줄이 생성될것이다
    "babel-cli": "^6.26.0",
    "babel-node": "^0.0.1-security",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1"
  }
}

이제 준비 작업은 끝이 났다 

GraphQL로 해결할 수 있는 두가지 문제를 알아보자

1. Over-fetching

2. Under-fetching

/user/1/GET

* 예로 user의 이름을 웹에보여주고 싶다고 가정을 하자

* 하지만 일반적으로 지금까지 사용한 서버는 이름만 가져오는 것이 아니라

* 성이나 프로필사진같은 모든 유저들의 정보를 받게된다

* 이것을 Over-fetching라고 한다

* 즉, 내가 요청한 영역의 정보보다, 많은정보를 서버에서 받게되는 것을 말한다

* Under-fetching은 어떤 하나를 완성하기위해 내가 다른 요청들을 해야할 때 발생한다.

* 예를 들어 우리가 인스타그램의 앱을 시작하려면 많은 정보를 받게된다

* 즉, 아래의 코드처럼 3가지 요청이 3번 오고가야 앱이 시작된다

* 이것이 Under-fetching이다

* 이 문제를 해결하기 위해 GraphQL은 URL 체계가 존재하지 않는다

/feed/

/notifications/

/user/1/

/graphql // 위의 코드가 아닌 하나의 종점만 있을 뿐이다 이걸로 모든것이 가능해진다

// 아래의 GraphQL 언어를 만들어서 하나에 모든것을 담아서 보내고 받을 수 있다

{
  feed {
    comments
    likeNumber
  }
  Notifications {
    isRead
  }
  user {
    username
    profilepic
  }
}

// 위의 코드를 GraphQL에 보내고 밑의 코드가 GraphQL에서 보낸 java script Object이다

// 내가 요청한 것만 정확하게 보내주는 것을 알 수 있다

{
  feed: [
    {
      comments: 1,
      likeNumber: 20
    }
  ],
  notifications: [
    {
      isRead: true
    },
    {
      isRead: false
    }
  ],
  user: [
    {
      username: "kim",
      profilepic: "http"
    }
  ]
}