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

안녕하세요.

오늘은 GraphQL 에서 데이터를 Create 할 수 있는  Mutation 에 대하여 포스팅 해보겠습니다.

기존에는  Query를 통하여 데이터를 가져오는 방법을 했었는데, 전체 데이터를 가져오기도 하고 Parameter를 이용하여 특정 데이터를 가져오기도 하였습니다.

GraphQL - Query

[GraphQL] GraphQL 시작하기 - 2 (Query with parameter)

먼저 스키마를 정의해줍니다.

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!
}

Mutation을 정의해주고 그 안에 addPerson이라는 함수를 만들어줍니다.

이 함수는 파라미터로 name, age, gender를 받게 되고 새롭게 만들어진 Person을 리턴해 줍니다.

resolvers.js

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

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

export default resolvers

resolvers에서 Mutation으로 addPerson이 들어오게 되면 dummy/people 안에 있는 addPerson 을 불러집니다. 때에 따라서 dummy/people안에 있는 addPerson에서 api 통신을 할 수도 있고 직접 DB에 접근하여 데이터를 관리 할 수 도 있겠죠?

실제 dummy/people.js에서는 이와 같이 정의 되어 있습니다.

const 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 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 default people;

people 데이터에 새로운 newPerson 객체를 push 해주고 newPerson 객체를 리턴해줍니다.

그럼 Mutation도 끝입니다.

앞선 포스팅에서 CRUD 라고 기본을 정의 하였을 때에 Create, Update, Delete -> Mutation // Read -> Query 라고 생각하면 편하겠네요.

테스트를 해보겠습니다. localhost:4000 (playground 에 들어가봅니다)

 

1. 위와 같이 Query를 날려보겠습니다.

query {
  people {
    name
    age
  }
  person (id: "1") {
    name
  }
} # Write your query or mutation here

 

2. 정의 하였던 데이터에 따라서 다음과 같이 응답이 오게 됩니다.

{
  "data": {
    "people": [
      {
        "name": "person_1",
        "age": 11
      },
      {
        "name": "person_2",
        "age": 15
      },
      {
        "name": "person_3",
        "age": 18
      },
      {
        "name": "person_4",
        "age": 21
      },
      {
        "name": "person_5",
        "age": 55
      },
      {
        "name": "person_6",
        "age": 22
      }
    ],
    "person": {
      "name": "person_1"
    }
  }
}

 

3.  Mutation을 날려보겠습니다.

mutation {
  addPerson(name: "test_2", age: 2, gender: "female") {
    name
  }
} # Write your query or mutation here

4. 새로 만든 newPerson에 객체를 리턴해주기로 했고 위에 mutation에서 name만 리턴하기로 하였기 때문에 다음과 같은 결과를 받을 수 있습니다.'

{
  "data": {
    "addPerson": {
      "name": "test_2"
    }
  }
}

5. 그 다음 다시 Query를 날려봅니다. (1번과 같은 Query를 날려보겠습니다.)

query {
  people {
    name
    age
  }
  person (id: "1") {
    name
  }
} # Write your query or mutation here

6. 결과로 아까 3번에서 추가한 객체가 추가 된것 을 보실 수 있습니다.

{
  "data": {
    "people": [
      {
        "name": "person_1",
        "age": 11
      },
      {
        "name": "person_2",
        "age": 15
      },
      {
        "name": "person_3",
        "age": 18
      },
      {
        "name": "person_4",
        "age": 21
      },
      {
        "name": "person_5",
        "age": 55
      },
      {
        "name": "person_6",
        "age": 22
      },
      {
        "name": "test_2",
        "age": 2
      }
    ],
    "person": {
      "name": "person_1"
    }
  }
}

 

이렇게 GraphQL을 사용하여 데이터를 추가하고 가져오기도 하였습니다. 또한 playground를 통하여 어떤 parameter가 필요하고 return값이 무엇인지 쉽게 테스트 해 볼 수도 있죠. 또한 resolver에서 REST API 통신을 할 수 도 있고, DB에 접근할 수 도 있겠죠?

- Query : 읽기 작업을 하는 GraphQL문을 의미한다.

    - field : query에 있는 값(속성)

- Mutation : 데이터 수정 작업을 하는 GraphQL문을 의미한다.

- schema : Query와 Mutation의 retrun type과 arguments type 및 custom type, custom interface, enum type 등과 input value의 default값 등을 정의한 코드를 의미한다.

- resolver : schema에서 정의된 Query와 Mutation의 구조에 맞추어 retrun type과 arguments type에 맞추어 설정한 코드를 의미한다.

출처: https://vomvoru.github.io/blog/about-GraphQL/

 다음에는 조금 더 심화로 그래프큐엘을 작성해보도록 하겠습니다.

기초는 여기 까지인데 아직 익숙치 않아서 조금 더 익숙해 지도록 연습을 많이 해봐야겠네요