데이터 수정

수정의 경우에는 인자가 두가지가 필요합니다.

• 수정할 데이터를 선택할 식별자
• 수정할 데이터

등록과 같이 Mutation에서 작성하게 됩니다.
먼저 쿼리를 등록해주세요

Mutation등록

const schema = buildSchema(`
input ProductInput {
    name:String
    price:Int
    description:String
}
type Product{
    id:ID!  
    name:String
    price:Int
    description:String
}
type Query{
    getProduct(id:ID!):Product
}
type Mutation{
    addProduct(input:ProductInput):Product
    updateProduct(id:ID!,input:ProductInput!):Product
}
`);

id와 productInput을 필수로 입력받아 수정을 적용해준뒤 수정된 Product를 return해 줄 것입니다.

그뒤에는 수정을 처리해주는 로직을 만들어주어야겠죠?

const root = {
  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),  //id값은 그대로 유지시켜주고,
      ...input,          //spread연산자를 이용해 input를 그대로 넣어줍니다.
    };
    return products[index];   //수정한 상품을 리턴해줍니다.
  },
};

• products배열에서 전달받은 id와 같은 id를 가진 상풍의 index를 찾아내고,
• 해당 index의 상품정보를 수정해주었습니다.
• 수정된 상품을 다시 응답해주면 끝!

이제 다음 쿼리문으로 사용해보세요!

{
    "query": "mutation updateProduct( $id : ID! , $input: ProductInput! ) {updateProduct( id : $id  , input: $input){id} }",
    "variables": { "id" : 1 ,"input" : { "name" : "수정상품" , "price" : 1000 , "description" : "후후후" } }
}

데이터 삭제

삭제의 경우에는 삭제할 데이터를 찾기위해 필요한 식별자만 전달받으면 삭제가 가능해집니다!
삭제또한 Mutation에 작성을 해주는데, 한번 작성해볼까요?

type Mutation{
    addProduct(input:ProductInput):Product
    updateProduct(id:!ID,input:ProductInput!):Product
    deleteProduct(id:ID!):String
}

이쯤되면 아마 buildSchema의 구조에 대하여 이해가 가능해 지셨을것 같아요.

const schema = buildSchema(`
input ProductInput {
    name:String
    price:Int
    description:String
}
type Product{
    id:ID!  
    name:String
    price:Int
    description:String
}
type Query{
    getProduct(id:ID!):Product
}
type Mutation{
    addProduct(input:ProductInput):Product
    updateProduct(id:!ID,input:ProductInput!):Product
    deleteProduct(id:ID!):String
}
`);

id값을 통해 데이터를 찾은뒤 삭제후, 성공여부를 문자열로 응답해줄 것입니다.

• input : 입력받을 데이터의 구조를 정의해줍니다.
• type Product : 상품, 즉 스케마의 구조를 정의해줍니다.
• type Query : 조회에 필요한 쿼리를 등록해줍니다.
• type Mutation : 수정,삭제,등록에 필요한 쿼리를 등록합니다.

즉 여기서는 쿼리를 어떤 구조로 작성하겠다. 라고 등록해준뒤, 하단 즉, root부분에서 구체적인 로직을 정의해 주는 것입니다.
이번에는 구체적인 로직을 작성해봅니다

const root = {
  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 "remove success"
  },
};

• id를 받아 상품의 id와 같은 상품의 index를 알아낸뒤
• 해당 인덱스에서부터 1개의 데이터를 배열에서 지워줍니다.
• "remove success"라는 문자열을 응답해주었습니다.

이제 다음 쿼리를 실행해 볼까요?

{
    "query": "mutation deleteProduct( $id : ID! ) { deleteProduct( id : $id  )  }",
    "variables": { "id" : 1  }
}

지금까지는 간단한 작업만 이루어졌지만, 만약 실제 DB와 연동하게 된다면, root안에 DB에서 값을 조회하는 등의 로직을 작성해 주면 됩니다.

다음에는 클라이언트 즉, 프론트앤드서버에서 graphQL을 호출하는 방법을 알아보겠습니다.