graphql-yoga?

• graphql을 쉽게 셋업할 수 있도록 만든 패키지
• 상세 내용: https://github.com/prisma-labs/graphql-yoga

프로젝트 생성하기

yarn init

yarn init

git init

git init
git flow init
git remote add origin git@github.com:user/repo.git

.gitignore 파일 추가

.env*
dist
package-lock.json
node_modules
.idea
*.log
.graphcoolrc
**/.DS_Store

TypeScript 설치하기

패키지 설치

# type script, ts-node 설치
yarn add typescript ts-node --dev
# type script init
yarn run tsc --init

tsconfig.json 수정하기

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": false,
    "lib": ["esnext", "dom"]
  }
}

Nodemon 설치하기

nodemon?

• nodemon은 node.js 기반의 라이브러리로 파일의 변경이나 신규 생성이 있을 때 서버를 재시작시켜주는 역할을 함

패키지 설치하기

# 개발 환경에서만 사용할 것이기 때문에, dependencies를 명시
yarn add nodemon --dev

서버 설정파일 생성하기

mkdir scr/server.ts

server.ts

console.log("hello");

• console.log 함수를 통해 서버가 정상적으로 돌아가는지 확인하기

스크립트 변경하기 (package.json)

scripts: {
	"start": "nodemon -e ts,graphql -x ts-node src/server.ts"
}

server.ts 에 내용이 변경될 때마다 babel로 변환하여 서버를 실행하기 위해서 package.json 에 위 코드를 추가

GraphQL 서버 올리기

패키지 설치하기

yarn add graphql-yoga

서버파일 설정하기

src/server.ts

import { GraphQLServer } from "graphql-yoga";

const PORT = process.env.PORT;
const typeDefs = `
  type Query {
    hello(name: String): String!
  }
`;

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

const server = new GraphQLServer({ typeDefs, resolvers });
server.start({ port: PORT }, () =>
  console.log(`Server is running on http://localhost:${PORT}`)
);

로깅 라이브러리 설치하기

패키지 설치

yarn add morgan @types/morgan

미들웨어에 추가하기

import * as logger from "morgan";

const server = new GraphQLServer({ typeDefs, resolvers });
server.express.use(logger("dev"));

• 기본적으로 GraphQLServer는 express를 내장하고 있어서 express처럼 사용가능

전체 코드 구조

src
+-server.ts
package.json
.gitignore

전체코드는 아래 깃헙에서 확인하실 수 있습니다.
https://github.com/toy-crane/graphql-yoga-auth-example