[GraphQL] Movie API 만들기(2)-Server 생성

bomhada·2022년 5월 8일
0

GraphQL

목록 보기
2/5
post-thumbnail

👾 소개

기초 개념을 배웠으니, 이번에는 Movie api를 만들어보면서 실제로 사용해보겠습니다.
이 실습은 노마드코더 GraphQL강의를 바탕으로 작성하였습니다.

graphql-yoga 공식문서

👾 GraphQL 장점

GraphQL은 내가 원하는 정보들만 불러올 수 있습니다.
그래서 아래의 문제들을 모두 해결이 가능합니다.

Over-fetching

  • 필요한 데이터 이상을 받는 것.
  • REST API의 경우, 데이터 테이블을 요청할 때 모든 필드를 받아옵니다.

Under-fetching

  • 필요한 데이터를 받기 위해 1번 이상의 request를 보냅니다.
  • REST API의 경우 나뉘어진 테이블 만큼의 request를 보내고 각각의 response를 받습니다.

👾 서버 생성하기

0. VScode extention : graphQL

vscode IDE에서의 graphQL 적용을 위해 extension을 설치해 줍니다.

1. Package.json 생성

a. github에 repository를 생성합니다.
b. 프로젝트 폴더를 생성 한 뒤 IDE에서 npm init 명령어를 실행합니다.
c. git init을 해준 뒤 github에 생성한 repository에 업로드해줍니다.

npm init을 할 때, 터미널에서 뭔가 작동하다가 말고, 메시지를 날리길래 오류인가 싶어서
습관적으로 터미널에서 실행을 끄고 다시 시작을 한다고 엄하게 시간을 날려버렸는데,
알고보니 package.json을 설치하려면 간단한 작성이 필요해서 그에 대한 작성을 기다리는 글이었네요..ㅠㅠ

package.json생성 시 이름(name), 버전(version)은 필수적으로 입력해야하는 필드입니다.
그 외의 질문들은 description / git repository / keyword / author / license 가 있습니다.

2. 설치

npm i graphql-yoga
npm i nodemon -D
npm i @babel/cli -D
npm i @babel/core -D
npm i @babel/node -D
npm i @babel/preset-env -D
  • nodemon은 파일을 수정할 때마다 서버를 재시작해주는 라이브러리 입니다.

3. 환경 설정

.barbelrc 파일 생성

{"presets":["@babel/preset-env"]}

package.json 파일 수정

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

graphql폴더 > schema.js 파일 생성

import { buildSchema } from "graphql";

const schema = buildSchema(`
  type Query {
    name: String!
  }
`);

export default schema;
  • 이 곳에서 사용자가 무엇을 할지에 대해서 정의합니다.
  • 그 중 하나는 Database로 부터 정보를 얻는 것인데, 이것을 Query라고 부릅니다.
  • Query는 단지 정보를 받을 때만 쓰입니다.
  • Mutation이라는 것은 내가 정보를 변형할 때 내 서버에서 혹은 Database나 메모리에서,
    정보를 바꾸는 작업을 할 때를 말합니다.
  • query안에 name이라는 항목을 넣고, 그에 대한 답변으로 String을 줍니다.
    그리고 답변은 isRequired(필수)라는 뜻입니다.

graphql폴더 > resolvers.js 파일 생성
Resolver는 Query를 resolver(해결)하는 것을 말합니다.

const resolvers = {
   Query: {
     name: () => "nicolas"
   }
 };

 export default resolvers;
  • schema에서 name을 항목을 만들어 string을 답변으로 받도록 정하였기 때문에,
    resolvers에서 name에 "nicolas"라는 답변을 리턴해줍니다.

index.js 파일 생성
server 테스트를 할 때, 꼭 schema를 작성 후 해야 오류가 나지않습니다.
이 때, schema는 사용자에게 보내거나 사용자로부터 받을 data에 대한 설명입니다.
즉, 무엇을 받을지, 무엇을 줄지에 대한 설명입니다.

import { createServer } from "@graphql-yoga/node";
import schema from "./graphql/schema";
import resolvers from "./graphql/resolvers";

const server = createServer({
  schema: {
    typeDefs: schema,
    resolvers,
  }
});

server.start(() => console.log("Graphql Server Running"));
  • schema 안에 typeDefs에 위에 작성한 schema와 resolvers를 불러와 연결시켜줍니다.

자, 이제 server가 작동하는지 알아볼 시간이 되었습니다.
만약 제대로 작성이 되었다면 터미널에서 아래와 같은 이미지를 확인 할 수 있을겁니다.

0개의 댓글