[GraphQL] GraphQL 시작하기 - 4 (Mutation - delete)

안녕하세요.

지난 번에는 Mutation을 이용하여 Add 하는 법을 포스팅 했었죠. CRUD에서 Create부분 이죠.

GraphQL - Mutation (Add)

[GraphQL] GraphQL 시작하기 - 3 (Mutation)

오늘은 이와 반대대는 delete를 해보겠습니다. 어렵지 않습니다.

순서는 늘 똑같습니다.

scheme.graphql 수정 -> resolver.js 수정 -> 필요한 함수 수정 (Database 접근, REST API, Mock data 접근 등)

scheme.graphql

type Person {
  id: String!
  name: String!
  age: Int!
  gender: String!
}

type Query {
  people: [Person]!
  person(id: String!): Person!
}

type Mutation {
  addPerson(name: String!, age: Int!, gender: String!): Person!
  deletePerson(id: String!): Boolean!
}

Mutation에 deletePerson이 추가 되었습니다. 지우고자 하는 person에 id를 파라미터로 받고 삭제 성공 여부를 boolean으로 응답 받습니다.

resolver.js

import { getPeople, getPerson, addPerson, deletePerson } from '../dummy/people';

const resolvers = {
    Query: {
        people: () => getPeople(),
        person: (_, { id }) => getPerson(id)
    },
    Mutation: {
        addPerson: (_, { name, age, gender }) => addPerson(name, age, gender),
        deletePerson: (_, { id }) => deletePerson(id)
    }
}

export default resolvers;

 resolver 역시 deletePerson을 추가 해 줍니다.

dummy/people.js

let people = [
    {
        id: '1',
        name: 'person_1',
        age: 11,
        gender: 'male'
    },
    {
        id: '2',
        name: 'person_2',
        age: 15,
        gender: 'female'
    },
    {
        id: '3',
        name: 'person_3',
        age: 18,
        gender: 'female'
    },
    {
        id: '4',
        name: 'person_4',
        age: 21,
        gender: 'male'
    },
    {
        id: '5',
        name: 'person_5',
        age: 55,
        gender: 'female'
    },
    {
        id: '6',
        name: 'person_6',
        age: 22,
        gender: 'male'
    }
];

export const getPeople = () => {
    return people;
}

export const getPerson = (id) => {
    return people.filter((person) => person.id === id)[0];
}

export const addPerson = (name, age, gender) => {
    const newPerson = {
        id: String(people.length),
        name,
        age,
        gender,   
    };

    people.push(newPerson);

    return newPerson;
}

export const deletePerson = (id) => {
    const isIncludePerson = people.map((person) => person.id).includes(id);
    if (isIncludePerson) {
        people = people.filter((person) => {
            return person.id !== id;
        });
        return true;
    }
    return false;
}

export default people;

 

마지막으로 실제 아이디를 받아서 삭제 해 주는 함수를 만들어주고 return값을 상황에 따라서 정의해줍니다. 
끝입니다. 어렵지 않죠? 한번 테스트 해보겠습니다.

Test

1. 먼저 query를 해봅니다. 기존에 dummy/people.js에서 정의 되어 있던 data들이 응답 오는것을 볼 수 있습니다.

2. Mutation 에 delete를 해줍니다. id: '3' 을 지워보겠습니다.

3. 마지막으로 다시 query를 해보면 id가 '3'인 person이 지워지는 것을 확인 해 볼 수 있습니다.

 

어렵지 않네요. 원래는 심화를 포스팅 해보려 했지만, 다음에 다시 시도해보겠습니다.

오늘은 지난 포스팅에 이어 Create, Delete를 했다고 보시면 될것 같습니다.

그럼 오늘도 즐 코딩