[NODE 강의] GraphQL 데이터 CRUD

[클립명]

1. 데이터 쓰기

2. 데이터 수정, 삭제

3. 클라이언트 사용하기

이전 시간에는 graphQL이 무엇인지 알아보았다.

이제 패캠 nodejs 강의에서 설명해준 graphQL을 이용하여 데이터를 CRUD 하는 것에 대한 방법에 대해 정리해보자.

 

우선 폴더를 하나 만들고 필요한 노드 패키지를 설치한다.

//NPM 초기화
$ npm init

//연습에 필요한 노드 패키지 설치
$ npm install graphql
$ npm install express 
$ npm install express-graphql

 

🎈데이터 읽기 / 쓰기

const express = require('express');
const {graphqlHTTP} = require('express-graphql');
const {buildSchema} = require('graphql');

const schema = buildSchema(`
  # 데이터 추가 시 입력받는 값의 구조
  input ProductInput {
    name : String
    price : Int
    description : String
  }
  
  type Product {
    id: ID!
    name : String
    price : Int
    description : String
  }

  # 데이터 읽기 (R)
  type Query{
    getProduct( id : ID! ) : Product ,
  }

  # 데이터 변조(CUD)
  type Mutation {
    addProduct( input : ProductInput ) : Product
    updateProduct( id : ID! , input : ProductInput! ) : Product
    deleteProduct( id : ID! ) : String
  }
`);

const products = [{
  id : 1,
  name : '첫번째 제품',
  price : 2000,
  description : '하하하하핳하하'
},{
  id : 2,
  name : '두번째 제품',
  price : 4000,
  description : '나라라라라라라'
}]

const root = {
  //데이터 조회 (인자로 전달받은 ID에 해당하는 값을 products 배열객체에서 find하여 리턴
  getProduct : ({ id }) => products.find( product => product.id === parseInt(id)),
  //데이터 추가
  addProduct : ({ input }) => {
    input.id = parseInt(products.length + 1);
    products.push(input);
    return root.getProduct({ id : input.id })
  },
  //데이터 수정
  updateProduct : ({ id, input }) => {
    const index = products.findIndex( product => product.id === parseInt(id) );
    products[index] = {
      id : parseInt(id),
      //오퍼레이팅 연산자
      ...input
    }
    return products[index];
  },
  //데이터 삭제
  deleteProduct : ({ id }) => {
    const index = products.findIndex( product => product.id === parseInt(id) );
    products.splice( index, 1);
    return "DELETE SUCCESS";
  }
}

const app = express();
//graphql을 이용한 end-point 
app.use ('/graphql', graphqlHTTP({
  schema : schema,
  rootValue : root,
  //GUI툴인 graphiql 지원여부 (운영에서는 보안을 위해서 false로 설정)
  graphiql : true
}));

app.listen(4000, ()=>{
  console.log('listening on 4000');
})

위와 같이 코드를 작성한다. 코드를 보면 알겠지만, 이번 연습은 데이터베이스에 연결해서 데이터를 CRUD하는 것은 아니고, 임의로 배열 객체를 선언해놓고 해당 객체를 대상으로 CRUD 해봤다.

서버를 실행한 후, http://localhost:4000/graphql 로 이동하면, graphQL을 GUI 형태로 테스트해볼 수 있는 GraphiQL페이지가 나온다. ( 위 코드에서 graphiql : true 로 설정 )

graphQL 테스트가 가능한 GraphiQL 페이지 화면

해당 페이지에서 왼쪽 영역에 위와 같이 입력 후, 화살표 버튼을 클릭해서 실행해보면, 해당 데이터가 조회되는 것을 확인할 수 있다.

위 코드에서 getProduct 쿼리 부분을 보면, 전달받은 id 인자값에 해당하는 데이터를 products 배열객체에서 find로 찾아서 리턴해주도록 되어 있는 것을 볼 수 있다. 리턴 타입은 Product 타입으로 리턴한다.

API 테스트에 많이 사용하는 PostMan 에서도 아래와 같이 호출하면 해당되는 데이터가 정상적으로 리턴되는 것을 확인할 수 있다.

postman 테스트 결과

 

강의에서 graphQL에서 데이터의 읽기(R)은 Query로, 데이터의 변조(CUD)는 Mutation으로 처리한다고 한다.

따라서, 위의 코드를 보면 상품의 정보를 읽어오는 getProduct는 Query 타입에,

상품을 추가/수정/삭제하는 addProduct, updateProduct, deleteProduct는 Mutation타입에 작성된 것을 볼 수 있다.

 

GraphQL을 이용한 CRUD까지 연습을 해봤다.

확실히 REST API와는 다르게 end-point가 '/graphql' 하나로 끝난다는 말이 이해가 됐다. 복잡한 비즈니스 로직이 필요없는 기능이라면, graphQL을 이용하여 프론트엔드에서 CRUD를 처리해도 될 것 같다.

 

나중에 프로젝트를 하면서 데이터베이스에 연결하여 처리하는 부분도 한번 연습해봐야겠다.