GraphQL

GraphQL은 API 쿼리 언어이며, 데이터 유형을 정의하여 쿼리하기 위한 서버 런타임 시스템이다.

RESTful API와 비교하면, RESTful API는 Request마다 각각의 Endpoint를 사용하지만, GraphQL은 단일 Endpoint를 사용한다. 그리고 일반적인 Restful API 서버에서는 데이터를 주고받을 때 Over-Fetching, Under-Fetching 이 발생한다. 하지만 GraphQL은 RESTful API에서 발생할 수 있는 Over-Fetching, Under-Fetching 문제를 해결하였다.

Over-Fetching이란?

필요한 정보 영역보다 더 많은 정보를 서버로부터 받는 것을 말한다. 사용자 이름 정보만 필요한데 서버는 그 외에 정보도 같이 준다. 그럼 우리는 많은 정보 중에서 필요한 정보만 골라서 사용해야 한다.

Under-Fetching이란?

필요한 정보가 여러개일때 서버에 여러번 요청해야한다. 하지만 GraphQL은 한번의 요청으로 서버로 부터 필요한 모든 정보를 받을 수 있다.

이 글은 니꼴라스님의 동영상 강의 "GraphQL으로 영화API 만들기" 를 학습하고 정리한 내용입니다.

* * *

필요한 npm 모듈 설치하기

우선 graphql API 서버를 구현하는데 필요한 npm 모듈을 설치한다.

graphql-yoga 설치

graphql-yoga 사용하면 GraphQL 서버를 쉽게 설정할 수 있다.

yarn add graphql-yoga

바벨(babel) 설치

Babel은 ES6/ES7 코드를 ES5 코드로 변환해주는 도구이다. ES6/ES7으로 개발하기 위해서 babel-cli를 설치한다.

$ yarn global add babel-cli

[설치 오류 해결 방법]

1. EACCES: permission denied 오류가 발생하여 아래 링크를 보고 해결하였다.

   • https://tonyne.jeju.onl/2016/12/25/npm-eacces-permission-denied-error/

2. 또 다음 오류가 발생하여 --ignore-engines 옵션을 사용하여 설치하였다.
   
   babel-cli를 --ignore-engines 옵션을 사용하여 설치하는 방법.
   $ yarn global add babel-cli --ignore-engines

그리고 바벨에 필요한 추가 모듈을 설치한다.

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

.babelrc 파일을 생성한다.

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

nodemon 설치

nodemon은 js가 수정되면 서버를 자동으로 재시작해준다.

$ yarn global add nodemon

package.json에 다음을 추가한다.

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

다음은 package.json파일의 전체 내용이다.

─

index.js 파일 생성하고 실행하기

index.js 파일을 생성한다.

import { GraphQLServer } from 'graphql-yoga'

const server = new GraphQLServer({})
server.start(() => console.log('Server is running on localhost:4000'))

npm start으로 서버를 실행하면, 아직은 에러 메세지가 출력 될 것이다.

$ npm start

─

scheme 생성하기

scheme에는 쿼리에 사용할 데이터 유형을 정의한다.graphql 폴더를 생성하고 scheme.graphql 파일을 생성한다.

graphql
  └─ scheme.graphql

scheme.graphql 파일을 생성하고 Marketplace에서 확장 프로그램을 설치한다.

scheme.graphql 파일에는 type을 추가한다.

type Query {
  name: String!
}

name은 요청값이고 응답값 유형은 String이다. 그리고 !은 필수값(required)이라는 의미이다.

─

resolvers 생성하기

resolvers.js 파일을 생성한다.

graphql
├─ scheme.graphql
└─ resolvers.js

resolvers.js 파일에는 Query를 위한 resolvers를 작성한다. name으로 요청이 들어오면 응답값으로 anpigon을 리턴한다.

const resolvers = {
  Query: {
    name: () => `anpigon`,
  },
}

index.js 파일에 typeDefs와 resolvers 를 추가한다.

import { GraphQLServer } from 'graphql-yoga'
import resolvers from './graphql/resolvers' // 추가된 코드

const server = new GraphQLServer({
  typeDefs: "graphql/scheme.graphql", // 추가된 코드
  resolvers // 추가된 코드
})
server.start(() => console.log('Server is running on localhost:4000'))

서버를 실행하고 브라우저에서 localhost:4000를 접속하면 아래 화면을 볼 수 있다. graphql-yoga 모듈에서 제공하는 GraphQL Playground 화면이다. (자세한 내용은 여기를 참조한다.)

서버에 요청을 보내보자. 그럼 서버에서 아래와 같이 응답이 내려온다.

scheme.graphql 파일을 다음과 같이 수정한다. person을 요청하면 응답값으로 Anpigon 객체를 리턴한다.

type Anpigon {
  name: String!,
  age: Int!,
  gender: String!,
}

type Query {
  person: Anpigon!
}

resolvers.js 파일을 다음과 같이 수정한다.

const Anpigon = {
  name: 'anpigon',
  age: 17,
  gender: 'men',
}

const resolvers = {
  Query: {
    person: () => Anpigon,
  },
}

export default resolvers

브러우저에 접속해서 SCHEMA 패널을 열어보자. 그러면 요청할 수 있는 쿼리 유형과 응답 유형을 확일 할 수 있다.

person값 중에서 age 값만 받고 싶으면 아래와 같이 요청할 수 있다. 그럼 우리가 요청한 age 값만 받을 수 있다.

끝.

---

_{Sponsored ( Powered by dclick )}

[매매일지]/#2-1/현상태

^{네오는 4% 먹고(매도) 다시 매수했습니다^^ 지지만 잘해주면 굳 스텔라 61.8% 되돌림때 ...}