[노마드코더] GraphQL API - 마지막

GraphQL 사용법

 

1. 서버 만들기

프로젝트 폴더 생성

yarn init

(git repository 연결)

yarn add graphql-yoga

yarn global add nodemon (파일 수정 -> 자동 서버 재시작)

package.json 수정

"scripts": {
	"start": "nodemon"
}

 

(babel) - 최신 JS 사용을 위해서

yarn add babel-node --dev

yarn global add babel-cli --ignore-engines

package.json 수정

"scripts": {
	"start": "nodemon --exec babel-node index.js"
}

.babelrc 파일 생성 (babel 환경설정)

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

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

yarn start

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

const server = new GraphQLServer({
	typeDefs: "./graphql/schema.graphql", //GraphQL Schema 파일
    resolvers //resolver 파일의 resolvers
});

server.start(() => console.log("GraphQL Server Runnning"));

 

반응형

2. Schema 파일

[선택] VScode Extension (GraphQL 설치)

 

schema.graphql 파일 - GraphQL에서 쿼리를 보낼 때 형식을 정해놓는 파일

type Movie{
     id: Int!
     name: String!
     score: Float!
 }

 type Query{
     movies: [Movie]!
     movie(id: Int!): Movie
 }

 type Mutation {
     addMovie(name: String!, score: Float!): Movie! //삽입
     deleteMovie(id: Int!): Boolean! //삭제
 }
 //데이터 타입은 요청한 데이터의 리턴값이다.
 //! - 필수라는 의미 (없을 경우 에러, NOT NULL과 유사)

 

resolvers.js 파일 - GraphQL 쿼리 요청이 들어오면 resolver에서 처리해서 해당하는 값만 return한다.

import {getMovies, getById, addMovie, deleteMovie} from "./db"
 const resolvers = {
     Query: {
         movies: () => getMovies(),
         movie: (_,{id}) => getById(id)
     },
     Mutation: {
         addMovie: (_, {name, score}) => addMovie(name, score),
         deleteMovie: (_, {id}) => deleteMovie(id)
     }
 }

 export default resolvers; 

 

db.js 파일 - DB나 API를 통해 얻은 데이터를 받아왔다고 가정하고 데이터들을 삽입, 삭제, 조회하는 함수들을 만들어 놓는다.

let movies = [
     {
         id: 0,
         name: "Movie1",
         score: 3.3
     },
     {
         id: 1,
         name: "Movie2",
         score: 4.3
     },
     {
         id: 2,
         name: "Movie3",
         score: 5.3
     },
     {
         id: 3,
         name: "Movie4",
         score: 10.3
     },
 ]; //임의의 영화 리스트가 있다고 가정

 export const getMovies = () => movies; //전체 영화 리스트 불러오기

 export const getById = id => {
     const filteredMovies = movies.filter(movie => movie.id === id);
     return filteredMovies[0];
 }; //영화 ID로 한 개 불러오기

 export const deleteMovie = (id) => {
     const cleanedMovies = movies.filter(movie => movie.id !== id);
     if(movies.length > cleanedMovies.length){
         movies = cleanedMovies;
         return true;
     } else {
         return false;
     }
 } //영화 리스트에서 삭제

 export const addMovie = (name, score) => {
     const newMovie = {
         id: movies.length + 1,
         name,
         score
     };
     movies.push(newMovie);
     return newMovie;
 } //영화 리스트에 추가

1. GraphQL은 graphql파일에서 스키마를 정의하고 이 스키마에 따라 서버를 시작한다.

2. 클라이언트에서 보낸 쿼리에서 원하는 값을 스키마에서 찾아 형식이 맞는지 확인한다.

3. resolver에서 해당 쿼리를 찾아가 구현해놓은 대로 수행하고 return을 받아 클라이언트에게 돌려준다.

 

schema와 resolver만 있으면 서버를 시작하고 클라이언트와 데이터를 주고 받을 수 있다는 점이 GraphQL의 큰 장점이라고 생각한다.

아직 GraphQL은 어색하고 백엔드도 제대로 해본 적 없지만 REST와 차이를 비교하면서 공부해보니 더 유익하고 흥미로웠다.

 

이후에는 영화 API에서 REST API를 이용해 fetch를 받아 데이터를 GraphQL로 보내주는 과정을 진행했다.

GraphQL에서는 클라이언트와 통신하는 것 뿐만 아니라 다른 API와도 통신할 수 있기 때문에

기존에 있는 REST API도 내부적으로 처리하여 이용할 수 있었다.

https://github.com/eogh234/movieql

eogh234/movieql