GraphQL로 API서버 만들어보기

최근에 많은 API서버들을 만들어보면서 어느정도 감을 익히고 있었다.

대표적으로 Django의 Restframework로 주로 작업을 했었고, Nodejs를 통해서도 Restful한 API서버를 제작했었다.

그러다가 페이스북에서 만든 GraphQL이라는 것을 알게 되었고 공부할 겸 사용해보기로 했다.

먼저 GraphQL의 장점부터 살펴보자.

보통 API서버를 구축한다고 하면 Restful API서버를 구축한다. 상당히 편리하게 접근할 수 있지만

정보를 요청할 때 Over-fetching, Under-fetching이 발생한다.

Over-fetching이란, 예를 들어 1번 사용자의 username이 필요하다고 가정해보자.

/users/1로 요청하게 될텐데, 여기에 따른 Response는 username뿐만이 아니라 프로필 사진, 사는지역 등 더 많은 정보들이 포함된다.

우리는 username 하나만 필요하지만 이렇게 모든 정보를 불러온 후 우리가 사용할 것만 뽑아내야 하기 때문에 리소스 낭비가 된다.

Under-fetching이란, 예를 들어 사용자가 SNS 어플리케이션을 실행시켰다고 가정해본다.

알림에 관한 부분, 사용자 정보, 타임라인 등을 불러오는 API요청을 여러번 보내야 한다.

하지만 GraphQL을 이용하면 이러한 많은 정보를 한번의 요청으로 해결할 수 있다.

또한 알아둬야할 점이 있는데, RestAPI의 경우 스케일이 커지면 많은 End-point를 만들어줘야 한다.

하지만 GraphQL은 다르다. RestAPI처럼 /users/, /users/1 등의 엔드포인트는 존재하지 않는다.

보통 일반적으로 /graphql 또는 /api등의 이름으로 사용하고 하나의 엔드포인트를 통해 모든 정보를 받아온다.

먼저 작업할 폴더를 만들고 yarn init으로 프로젝트를 시작한다.

다음으로 babel관련 라이브러리와 쉽게 서버를 작동시키기 위한 graphql-yoga,

소스를 수정했을 때 자동으로 재시작해주는 nodemon을 차례대로 설치한다.

yarn add graphql-yoga

yarn global add nodemon

yarn add babel-node --dev

yarn global add babel-cli --ignore-engines

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

다음으로 package.json파일을 열고 아래의 라인을 추가한다.

"scripts": {

"start": "nodemon --exec babel-node index.js"

}

그리고 Babel문법을 사용하기 위해 .babelrc 파일을 생성하고 아래의 라인을 추가한다.

{

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

}

이제 schema와 resolvers를 생성해야 한다. graphql이라는 폴더를 하나 생성하고 schema.graphql 파일을 생성한다.

type Query {

name: String!

}

그리고 위 내용을 추가한다. GraphQL을 사용하면서 알아둬야할 두가지가 바로 query와 mutation이다.

query란 사용자로부터 데이터를 입력받는 것을 의미하고 mutation은 데이터베이스 등의 데이터를 수정/삭제 하는 것이라고 의미하면 된다.

튼, 입력받을 Query에 대해 정의해주는 것인데, 변수명은 name이고 타입은 String이며 !를 추가하며 필수적으로 입력해야 한다고 선언했다.

이제 같은 폴더에 resolvers.js 파일을 만들고 아래의 내용을 채워넣는다.

const resolvers = {

Query: {

name: () => "hide"

}

}

export default resolvers

실제 쿼리에서 입력이 왔을 때 어떠한 값을 반환시켜주는지에 대한 부분이다.

이제 index.js파일에 아래의 내용을 추가한다.

import { GraphQLServer } from "graphql-yoga";

import resolvers from "./graphql/resolvers";

const server = new GraphQLServer({

typeDefs: "graphql/schema.graphql",

resolvers: resolvers

});

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

typeDefs에 이전에 생성한 스키마의 경로를 주었고 resolvers도 마찬가지로 정의해줬다.

이제 yarn start를 통해 서버를 실행하고 localhost:4000으로 들어가보면, 

위와 같이 visualize한 페이지를 볼 수 있다.

왼쪽이 사용자가 입력값을 적는 부분이고 

query {

     요청변수
}

형태로 작성하면 된다.

그러면 우리가 작성해놓은 대로 값이 반환된다.

오늘은 GraphQL을 처음 접해본 것이므로 여기서 마무리한다.