[GraphQL] 6. Mutation 쿼리 짜는 기본 코드 설명

얄팍한 코딩 사전 강의

 

query가 데이터를 get 해오는 거라면, mutation은 데이터에 내가 어떤 추가, 수정, 삭제를 하는 것이다. 사실 query문을 사용하여 resolvers를 어떻게 짜냐에 따라서 데이터를 수정할 수도 있고, mutation문으로 데이터를 받아오도록 짤 수 있다. 하지만 이런 쿼리문은 개발자들끼리 약속한 하나의 명세이니 원래 의도에 맞추는 것이 바람직하다.

 

1. Mutation으로 데이터 삭제하기

const typeDefs = gql`
  type Query {
    teams: [Team]
    team(id: Int): Team
    equipments: [Equipment]
    supplies: [Supply]
  }
  type Mutation {
    deleteEquipment(id: String): Equipment
  }
  ...
}

쿼리와 마찬가지로, Mutation도 루트 타입을 만들어준다. deleteEquipment라고 하나 이름을 지정해 주고, 어떤 항목을 삭제할지 특정지어야 하기 때문에 id를 인자로 받도록 한다. Equipment 자료형은 id가 String이니 String으로 정해준다. 

또 삭제를 수행하고 나서 어떤 자료형을 반환하게 할지 지정해줘야 하는데, 보통 삭제가 잘 됐는지 Boolean 값을 리턴할 수도 있고 삭제된 것의 id를 반환할 수도 있겠지만 여기서는 삭제된 equipment를 반환하도록 했다.

 

const resolvers = {
  // ...
  Mutation: {
    deleteEquipment: (parent, args, context, info) => {
      const deleted = database.equipments.filter((equipment) => {
        return equipment.id === args.id;
      })[0];
      database.equipments = database.equipments.filter((equipment) => {
        return equipment.id !== args.id;
      });
      return deleted;
    },
  },
};

resolvers 쪽에 Mutation을 작성해 준다. 인자를 받아서 인자의 id에 해당하는 디비의 데이터를 삭제해줄 것이다. 원래대로라면 여기에 MySQL이나 Oracle 등의 쿼리라던지 MongoDB의 명령어 등, 실제 디비에 접근하는 코드 들일 것이다. 여기서는 로컬에 있는 목 데이터라서 이렇게 작성한다.

 

mutation을 날려서 삭제를 진행해 보면, 삭제 후 삭제된 항목이 반환됨을 확인할 수 있다.

 

다시 query로 equipment를 조회해 보면 아까 삭제한 데이터만 제외하고 반환된다.

 

2. Mutation으로 데이터 추가하기

  type Mutation {
    // ...
    insertEquipment(
      id: String
      used_by: String
      count: Int
      new_or_used: String
    ): Equipment
  }

데이터를 추가할 때는 해당 데이터에 모든 구성 요소들이 포함되어야 하기 때문에 인자로 보내줘야 하는 항목들이 많다. 그리고 결과물로는 새로 추가된 equipment를 받기로 한다. 

 

  Mutation: {
    insertEquipment: (parent, args, context, info) => {
      database.equipments.push(args);
      return args;
    },
    // ...
}

args는 equipment와 동일한 데이터 구조를 가질 것이기 때문에 바로 equipments 배열에 push 한다. MySQL로 짠다면 "INSERT INTO" 구문이 들어갈 것이다. 

 

이건 mutation으로 insertEquipment 요청을 날리고 받은 응답이고,

 

이건 다시 query로 equipments를 조회한 결과다. 마지막에 laptop이 추가됐음을 알 수 있다.

 

3. Mutation으로 데이터 수정하기

  type Mutation {
    // ...
    editEquipment(
      id: String
      used_by: String
      count: Int
      new_or_used: String
    ): Equipment
  }

insertEquipment와 마찬가지로 루트 타입을 만들어 주고,

 

    editEquipment: (parent, args, context, info) => {
      return database.equipments
        .filter((equipment) => equipment.id === args.id)
        .map((equipment) => {
          Object.assign(equipment, args);
          return equipment;
        })[0];
    },

Mutation의 resolver에서 로직을 짜면 되는 것이다. 

 

editEquipment로 수정 요청을 한 결과다. equipment 중에서 id가 일치하는 항목을 찾아, mutation을 날린다.

 

query를 날려 확인해 보면, "pen tablet" 에 대한 정보가 변경되어 있음을 확인 가능하다.