GraphQL#3 - Mutation

GraphQl Mutation기능에 대해 정리해보자.

해당 포스트는 이전 포스트와 연결되어 진행되는 포스트이기 때문에 관련 소스 역시 연결되어 진행한다.

Mutation

Mutation기능은 이전에서 소개한거처럼 CRUD중 Create, Update, Delete를 당담하는 Query문이다. Mutation에도 역시 짝을 이루는 Resolver가 필요하며, 보통 Mutation과 짝을 이루는 Resolver 함수에서 Business logic이 들어가게 된다.

Mutation Type 선언

기존 소스에 이어서 멤버를 추가해보는 Mutation Type을 선언해보자.

// 기존소스 
type Member {
  name: String
  email: String
}
type Query {
  members: [Member]
}
// 추가할 Mutation type
// type TYPE명
// field값(...인자값): 리턴값
type Mutation {
  addMember(name: String!, email: String!): Member
}

추가된 Mutation type을 풀어서 설명을 해보자면
1. Mutation Type을 정의한다.
2. Mutation Type에 addMember 라는 field값을 정의 및 추가한다.
3. field값에는 name, email이라는 인자가 필수값이고 String이여야만 한다.
4. : Member라는 부분은 Member라는 Type의 정의된 값으로 Return시킨다의 의미이다.
5. Mutation의 각 field에는 Non-nullable을 막기위해 정의된 Type 또는 Scalar Type과 상응하는 값을 꼭 return 시켜줘야 한다.

Mutation Resolver 선언

// 기존소스 
const resolver = {
  Query: {
    members: () => teamData,
  }
  // 추가할 Mutation Resolver
  Mutation: {
    addMember: (root, args) => addMemberFn(args)
  }
}

Mutation Resolver도 풀어서 설명을 해보자.

1. resolver에서도 typeDefs에서 정의해놓은 type값이랑 field값이랑 일치하는 값들을 Resolver에도 똑같이 선언해준다.
2. Type에서 넘기는 인자(name, email)는 Resolver 함수의 2번째 인자인 args 로 받아진다. (본 포스팅 2편 참고)
3. resolver 함수의 1,3,4번째 인자는 굳이 지금 알지 않아도 상관없다.
4. addMemberFn은 임의로 정한 함수명이고 addMember라는 Field값의 Resolve 함수가 return받는 값 또는 함수라고 보면 된다.

Business Logic

위에 임의로 정한 함수명이였던 addMemberFn에 대한 정의를 해보자.

const addMemberFn = (args) => {
  const { name, email } = args;
  const data = {
    name,
    email,
  };

  teamData.push(data);
  return data;
}

위에 Resolver 함수의 2번째 인자로 받았던 args를 다시 인자로 받아서 새로운 팀 멤버를 Mockup Data였던 teamData에 push해주는 로직이다.

data로 return하는 이유는 Mutation type에 선언해준 return값을 member type으로 정의해두었기 때문이다. 예를들어 Mutation type에 return값을 Boolean으로 정의를 해두었다면 해당 함수의 return값은 Boolean으로 꼭 반환을 해야 된다.

이렇게 한세트가 세팅이 된다면 해당 Mutation 기능은 완성이 되었다.
다시 localhost:7077/graphql 에 접속해서 해당 기능을 테스트 해보자.
해당 테스트는 아래의 순서로 진행된다.

• Mockup Data였던 teamData 노출 확인.
• addMember Resolve 함수 실행

{
  Mutation{
    addMember(name: "팀원4", email: "팀원4@gmail.com"){
      name
      email
    }
  }
}

• return값 확인
• 다시 TeamData에 추가된 부분 확인하기

마치며..

위에는 단순히 addMember라는 Mutation을 예시로 최대한 포인트만 집어서 설명 및 기록을 하려고 노력했다. add 뿐만 아니라 delete, edit등의 기능도 꼭 추가해서 한번씩 만들어 보길 권장한다.
아래는 추가로 만들시의 예시이다.

// type
type Mutation {
  addMember(name: String!, email: String!): Member
  deleteMember('당신이 필요한 argument'): 'return받을 type or scarla'
}
// resolver
Mutation: {
  addMember: (root, args) => addMemberFn(args)
  deleteMember: (root, args): '삭제하는데 필요한 business logic function'
}

Mutation 한가지만 설명해도 양이 꽤 많이 되버렸다. 원래 schema module 분리도 같이 포스팅 하려 했지만 다음 포스트로 이어서 가야될듯 하다.