시험 기간에 머리 식힐 겸(?) 만들어 본 간단한 GraphQL 시뮬레이터를 만들었다. GraphQL 자체가 간결해서 그런지 순 제작시간은 5시간정도 걸린 것 같다.

그럴듯한 Readme 마크다운도 만들었는데, 설명은 이것으로 대체한다. 세부적인 CRUD API 구축 방법은 이전 포스팅 - GraphQL로 CRUD 만들기에서 볼 수 있다.

여기에서 샘플을 볼 수 있다. 헤로쿠로 호스팅해서 초반 로딩 속도는 조금 걸린다.

graphql-crud-demo

GraphQL CRUD Operations in Node.js, Axios, VanillaJS

gql-crud-page-sample

Start

1
2
3
$ git clone https://github.com/zinirun/graphql-crud-demo
$ cd ./graphql-crud-demo
$ npm install # yarn install

Operations

Create

1
2
3
mutation addProduct($input: ProductInput) {
    addProduct(input: $input)
}

Read

1
{ getProduct(id : ?) { id price name description} }

Update

1
2
3
mutation updateProduct($id: ID!, $input: ProductInput!){
    updateProduct(id: $id, input: $input)
}

Delete

1
2
3
mutation deleteProduct{
    deleteProduct(id: ${id})
}

Also supports

  • Get all items
  • Debouncing Search (customized timer)
  • Set data-set default

Structure

  • GraphQL Server
    • /src/schema.js - Build-Schema defined
    • /src/rootValue.js - Mutations and queries implemented
    • /src/products.js - Shared data accessed from gql
    • /src/defaultProducts.js - Default data-set
  • Express
    • /app.js - Express instance defined
    • /server.js - Server started from /app.js
  • Client
    • /static/mod.js - DOM Initialized, all events added
    • /static/crud.js - Events implemented
    • /static/graphiql.js - Iframe for GraphiQL(GUI)

Hard-coded dataset /src/defaultProducts.js can be replaced by with Redis, etc…

사실 만들고 아무 생각 없이 Netlify로 만들다가 왜 안되나 했는데 저번에 그렇게 삽질했던 “Netlify는 정적 호스팅을 위한 서비스”라는게 떠올라서 부랴부랴 헤로쿠로 배포했다. 리액트를 조금 더 배워 React + Apollo + GraphQL + Redis 서비스를 배포해 봐야겠다.