[GraphQL] Mutation Type

Joah·2022년 11월 11일

graphql

GraphQL

목록 보기

7/9

🛼 Mutation

기본적으로 REST API로 통신할 때는 GET/POST/PUT/DELETE를 사용했다.
서버와의 소통으로 CRUD를 진행한다고 가정했을 때

query → Read
mutation → Create/Update/Delete

mutation 뜻 그대로 변형한다는 뜻이다. 그대로 읽어오는 것을 제외하고는 모두 mutation으로 데이터 요청을 한다.

즉, Database, data, cache, server에게 데이터를 변형하기 위한 요청이다.

graphQL에서는 REST API의 POST 요청은 모두 Mutation type

🏝 Mutation으로 Create하기

const typeDefs = gql`
  type User {
    id: ID
    username: String
  }
  type Feed {
    id: ID
    text: String
    creator: User
  }
  type Query {
    allFeeds: [Feed]
    feed(id: ID): Feed
  }
// 단순히 data를 받아오고 싶다면 Query -> GET
  type Mutation {
    postFeed(text: String, userId: ID): Feed
  }
// 데이터를 수정, 삭제, 생성 등 읽어오기 이외의 행위를 하고 싶다면 Mutation -> POST
`;

새로운 feed를 업로드 하기 위해서는 feed의 내용인 text가 필요하다.
지금은 인증/인가 없기 때문에 feed를 작성하는 user의 id명시한다.
해당 mutation이 완료되면 사용자에게 새로운 feed를 반환한다.

studio에서 확인하기!

mutation이 생성되었다!

mutation에 작성한 postFeed도 확인할 수 있다.

postFeed를 살펴보면 위의 코드에서 작성한 arguments를 확인할 수 있다.
그리고 Feed에서 정의한 id, text, creator에 대한 데이터도 받을 수 있다.

operation 확인하기

query문을 작성할 땐 굳이 "query"라고 작성하지 않아도 된다.
Default로 query 요청이기 때문이다.

하지만 mutation을 호출하게 되면
반드시 mutation을 명시해야 한다.

mutation안에는 postFeed가 있으니 자동완성 되는 것을 확인할 수 있다.

postFeed에 arguments로 text, userId를 작성하여 새로운 feed를 생성할 수 있다.

🏝 Mutation으로 delete하기

const typeDefs = gql`
  type User {
    id: ID
    username: String
  }
  type Feed {
    id: ID
    text: String
    creator: User
  }
  type Query {
    allFeeds: [Feed]
    feed(id: ID): Feed
  }
  type Mutation {
    postFeed(text: String, userId: ID): Feed
    deleteFeed(id: ID): Boolean
  }
`;