graphql-yoga로 GraphQL 시작하기

이번 포스팅은 GraphQL에 대한 심도있는 이야기보다 GraphQL을 이용한 back-end setup에 대한 부분을 다루고 있습니다.

GraphQL과 graphql-yoga에 대해 좀더 자세히 알고 싶으신 분은 하단의 GraphQL 공식 웹사이트와 graphql-yoga github를 참고하시기 바랍니다.

GraphQL

https://graphql.org/

graphql-yoga github

https://github.com/prisma/graphql-yoga

graphql-yoga로 GraphQL을 시작하고자 한다면 Node.js가 필요합니다. Node.js를 설치하도록 합니다.

Node.js Installation

https://nodejs.org/ko/download/

설치가 완료되었다면, package manager인 npm을 사용할 수 있습니다. yarn을 이용하고 싶다면, 아래의 링크를 이용하여 설치하도록 합니다.

yarn Installation

https://yarnpkg.com/en/

설치가 완료되었으면 이제 graphql-yoga를 적용할 프로젝트를 생성해보겠습니다. 각자 사용하고 있는 workspace에 위치한 상태에서 프로젝트 폴더를 하나 생성하도록 합니다. 저는 graphql이라는 이름으로 프로젝트를 생성하였습니다.

mkdir graphql
cd graphql

프로젝트 폴더에서 npm init 명령어를 이용하여 Node.js 프로젝트를 위한 package.json 파일을 생성해줍니다. 만일 초기 정보를 입력하기 번거롭다면 -y 옵션을 이용하여 기본정보로 자동생성하게 합니다.

npm init -y

폴더 내에 package.json 파일이 생성된 것을 볼 수 있습니다. 이제 graphql-yoga를 설치하기 위한 기본 세팅이 완료되었습니다.

npm을 이용하여 graphql-yoga를 설치해줍니다.

npm install graphql-yoga

graphql-yoga가 설치되면 이제 Node.js 프로그램의 변동사항을 바로 적용해주는 nodemon을 설치해주도록 합니다.

npm install -g nodemon

그다음 es6문법을 사용하기 위해서 babel을 설치해줍니다.

npm install @babel/core @babel/cli @babel/node @babel/preset-env --save-dev

설치를 완료한 후 프로젝트 폴더에 .babelrc 파일을 생성하여 babel preset을 설정합니다.

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

여기까치 처리가 완료되면 package.json 파일을 열어 scripts에 start를 추가해줍니다. 이때 nodemon과 babel-node를 사용하여 프로그램을 실행시키도록 명령어를 입력해줍니다.

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

이제 실제로 실행될 index.js 파일을 작성합니다. index.js 파일을 생성한 후 graphql-yoga github에 있는 demo을 참고하여 코드를 작성합니다.

import { GraphQLServer } from 'graphql-yoga'
// ... or using `require()`
// const { GraphQLServer } = require('graphql-yoga')

const typeDefs = `
  type Query {
    hello(name: String): String!
  }
`

const resolvers = {
  Query: {
    hello: (_, { name }) => `Hello ${name || 'World'}`,
  },
}

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