개요

GraphQL을 처음으로 구현해 보았을 때의 순서와 샘플 소스 코드를 기재하고 있습니다.

환경

macOS Big Sur 11.1

node v14.12.0

yarn 1.22.10

express 4.16.1

Docker version 19.03.13

docker-compose version 1.27.4

샘플 소스 코드

hayatoiwashita/express-graphql

절차

1. 프로젝트의 병아리 만들기

express-generator를 사용했다.--git 옵션은 .gitignore 를 추가하기 위한 옵션.

$ express --view=pug --git express-graphql

참고 : Express 애플리케이션 생성 프로그램

2. 라이브러리 설치

GraphQL 관련 라이브러리는 최소한 아래가 있으면 OK.

$ yarn add graphql
$ yarn add express-graphql

샘플 그럼 하기도 추가하고 있다(본제로부터 벗어날 수 있으므로 할애)

# ホットリロード
$ yarn add --dev nodemon
# コード整形
$ yarn add prettier --dev --exact
$ yarn add eslint --dev
$ yarn add --dev eslint-config-prettier
$ yarn add --dev eslint-plugin-prettier
# commit時にコード整形を実行
$ yarn add --dev lint-staged
$ yarn add --dev husky

3. 샘플 데이터 준비

/data/users.js 를 추가하여 DB 대신 사용했습니다.
(내용은 샘플 소스 코드 users.js 참조)

4. schema 정의

/schema/schema.graphql 를 작성해 schema를 정의.
이번에는 참조계 쿼리만 구현했다.
데이터 구조는 사용자와 그것에 연결하는 게시물 같은 형태.

schema.graphql

const { buildSchema } = require("graphql");

const schema = buildSchema(`
    type Query {
        users: [User!]!,
        user(id: Int!): User!
    }

    type User {
        id: ID!
        name: String!
        email: String
        posts: [Post!]
    }

    type Post {
        id: ID!
        title: String!
        published: Boolean!
        link: String
        author: User!
    }
`);

module.exports = schema;

5. 해석자 만들기

데이터 조작을 실시하는 /src/resolvers.js 를 작성.
위에서 언급했듯이 이번에는 참조 시스템 만.

resolvers.js

const { Users } = require('../data/users');

const resolvers = {
  users: async (_) => {
    console.log('come here');
    return Users;
  },
  user: async ({ id }, context) => {
    return Users.find((user) => user.id == id);
  },
};

module.exports = resolvers;

6. app.js 수정

엔드포인트 /graphql 정의.

app.js

// var createError = require('http-errors');
var express = require('express');
var { graphqlHTTP } = require('express-graphql');
var resolvers = require('./src/resolvers');
var schema = require('./schema/schema.graphql');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use(
  '/graphql',
  graphqlHTTP({
    schema,
    rootValue: resolvers,
    graphiql: true,
  })
);

module.exports = app;

7. [참고] 컨테이너화

Dockerfile 및 docker-compose.yml 추가.

FROM node:14.15.4-slim

WORKDIR /usr/local/src/express-graphql
ADD . .
RUN yarn install
CMD [ "yarn", "start" ]

docker-compose.yml

version: '3'

services:
  graphql:
    build: .
    container_name: graphql-container
    ports:
      - "3000:3000"

8. Express 시작

시작 명령을 실행합니다.

# コンテナで実行
$ docker-compose up

# コンテナを使用せず実行
$ yarn start

9. 쿼리 실행

http://localhost:3000/graphql 을(를) 브라우저에서 엽니다.


【샘플 쿼리】
내용으로서는, 유저 ID=1의 유저의 이름과, ​​그 유저의 투고(posts)의 ID와 타이틀을 취득한다고 하는 것.

{
  user(id:1) {
    name
    posts {
      id
      title
    }
  }
}

실행 결과

{
  "data": {
    "user": {
      "name": "Fikayo Adepoju",
      "posts": [
        {
          "id": "1",
          "title": "Debugging an Ionic Android App Using Chrome Dev Tools"
        },
        {
          "id": "2",
          "title": "Hosting a Laravel Application on Azure Web App"
        }
      ]
    }
  }
}

참고

GraphQL을 Node.js와 express로 사용해보기