[ GraphQL] 스키마(Schema) 정의 방법 (4): Mutation type

지난 포스팅까지 기본적인 스키마들을 정의해서 Query까지 만들어 보았습니다. 기본적인 타입은 Scalar types, Object types이 있었으며, 데이터를 호출하기 위해서 Query type을 만들어서 데이터를 가져오는 데까지 해보았습니다.

이번 포스팅에서는 네 번째로 Mutation type에 대해서 알아보도록 하겠습니다.

---

GraphQL 지원되는 타입의 종류

GraphQL에서 스키마 정의에 사용되는 모든 타입들은 아래와 같은 종류가 있습니다.

• Scalar types
• Object types
• The Query type
• The Mutation type
• Input types
• Enum types

이 중에서 이번 포스팅에서는 Mutation types에 대해서 알아보도록 하겠습니다.

---

The Mutation type 사용하는 방법

이 타입은 GraphQL의 API와 같은 형태라 생각할 수 있는 타입입니다. Query type과 마찬가지로 Mutation type은 API처럼 호출할 수 있도록 만들어 줍니다. 다만 Query type은 데이터를 가져와서 읽는 타입으로 생각할 수 있지만 Mutation type은 데이터를 쓰는 호출 방법입니다.

 

우선 아래와 같이 Mutation type을 하나 만들어 줍니다.

type Mutation {
  addBook(title: String, author: String): Book
}

addBook이라는 Mutation type을 하나 만들었으며 parameter로 들어가는 값은 title과 author 정보입니다. 그리고 결과로는 Book Object type으로 반환합니다.

 

타입을 만들었으니 resolver를 만들어 보겠습니다.

const resolvers = {
    Query: { books: () => books },
    Mutation: {
        addBook: (_, args) => {
            const { title, author } = args;

            const book = { title, author: { name: author } };
            books.push(book);

            return book;
        },
    },
};

기존 Query resolver는 그대로 두고 아래에 Mutation resolver를 하나 추가했습니다. type에서 선언한 addBook과 동일한 형태의 이름으로 선언하며, parameter를 주의해주셔야 합니다.

 

Mutation resolver의 첫 번째 parameter는 parent 값입니다. 이 부분은 Mutation을 조금 더 자세하게 다뤄볼때 한번 더 진행하도록 하겠습니다. 일단은 _로 비워둡니다.

 

두 번째 parameter는 우리가 원하는 argument 값입니다. 이 값은 type에서 선언하였듯, title과 author 데이터로 전달되게 됩니다. 따라서 데이터를 받을 때 여러 가지 방법으로 받을 수 있습니다.

// 첫 번째 방법
addBook: (_, {title, author}) => {... }

// 두 번째 방법
addBook: (_, args) => {
  const title = args.title;
  const author = args.author;
  ...
}

// 세 번째 방법
addBook: (_, args) => {
  const {title, author} = args; //ES6
  ...
}

편한 방법으로 사용할 수 있습니다.

 

이렇게 받은 데이터는 books에 저장하고 저장한 데이터를 return해 줍니다. return 데이터는 Book이기 때문에 이 형식을 만들어서 내보내 주시면 됩니다.

 

그럼 결과를 확인해 보겠습니다.

---

Apollo Server에 Mutation 실행

Apollo Server를 실행하려면 아래와 같이 Node를 실행합니다.

node index.js

🚀 Server ready at http://localhost:9000/

저의 경우는 4000 포트를 사용하고 있기 때문에 9000으로 변경한 것입니다. 정상적으로 서버가 올라왔다면 웹 브라우저로 접속해 봅니다.

 

그리고 아래와 같이 입력하도록 합니다.

mutation addBook($title: String, $author: String){
  addBook(title: $title, author: $author ) {
    title
    author {
      name
    }
  }
}

mutation임을 알려주기 위해서 가장 먼저 명시해 줍니다. 그리고 parameter로 받을 title과 author도 각각 어떤 type인지 명시하도록 합니다.

실제로 부를 Mutation은 addBook이며 결과로 title, author, name입니다.

이제 parameter를 넣어주기 위해서 좌측 하단을 보시면 QUERY VARIABLES라는 탭이 있습니다. 여기를 클릭하면 공간이 나타납니다. 이곳에 원하는 데이터를 입력합니다.

{
  "title": "Harry Potter",
  "author": "J. K. Rowling"
}

여기까지 했다면 이데 실행 버튼을 눌러줍니다.

정상적으로 실행되었다면 내가 넣은 데이터가 결과로 나타나게 됩니다. 실제로 데이터가 들어갔을까요? 확인하기 위해서 기존에 만든 Query를 호출해 보도록 하겠습니다.

 

 

기존의 데이터와 방금 넣은 Harry Potter 데이터까지 추가된 사실을 알 수 있습니다.

---

이번 포스팅에서는 Mutation에 대해서 간단하게 알아보았습니다. 사실 더 많은 내용들이 있지만 일단은 프로그래밍을 진행하기 위해서 사용하는 방법들만 진행했습니다. 도움이 되셨으면 합니다. 이상입니다.