[GraphQL] 2. GraphQL 형식으로 정보 주고받는 방법 정리

얄팍한 코딩 유튜브 강좌

 

1. GraphQL 형식 정리

 

(1) query

RestAPI로 따지면 get 같은 역할을 하는 게 GraphQL에서는 query다. 모든 팀의 정보 전체를 받아오기 위해 다음과 같이 쿼리를 날릴 수 있다. 

query { 
  teams { 
    id 
    manager 
    office 
    extension_number 
    mascot 
    cleaning_duty 
    project 
  } 
}

 

 

여기에서 manager와 office 정보만 받아오고 싶다면 이렇게 teams를 요청하면 된다.

query { 
  teams {
    manager 
    office
  } 
}

 

그리고 id가 2인 팀을 받고 싶다면 team(id: 2)로 요청한다.

query { 
  team(id: 2) {
    manager
    office
  }
}

 

이렇게 GraphQL에서는 query를 통해 간단히 원하는 정보만 걸러서 요청하고 받아올 수 있다. 

 

---

 

팀의 정보와 인원의 정보를 한꺼번에 필요로 할 때, RestAPI를 이용할 때 team과 people은 다른 api로 받아와야 했다. 그러나 GraphQL에서는 그냥 팀에 대한 쿼리에 members를 같이 끼워 넣으면 된다.

query {
  team(id: 2) {
    manager
    office
    members {
      team
      first_name
    }
  }
}

 

이로서 team이라는 계층과 people이라는 정보를 한꺼번에 받아올 수 있는 것이다. 여기서 왜 people이 아니라 members냐 하면 typedefs로 members라는 키로 people을 조회하도록 설정했기 때문이다.

 

const typeDefs = gql`
    type Team {
        id: ID!
        manager: String!
        office: String
        extension_number: String
        mascot: String,
        cleaning_duty: String!
        project: String
        members: [People]
    }
}
`
const resolvers = {
    Query: {
        teams: (parent, args) => dbWorks.getTeams(args),
        team: (parent, args) => dbWorks.getTeams(args)[0],
    },
}

 

다시 이제 team(id: 1)이 아니라, 모든 팀에 대한 정보를 받아오기 위해선 teams로 쿼리를 날리면 된다.

query {
  teams {
    manager
    office
    members {
      team
      first_name
    }
  }
}

 

한편 현재 디비에는 roles라는 데이터도 있다. 아까 요청했던 teams와 roles을 같이 받아오고 싶다면 다음과 같이 둘 다 쓰면 된다.

 

query {
  teams {
    manager
    project
  }
  roles {
    id
    job
  }
}

 

이런 식으로 하면 overfetching, underfetching 모두 해결이 된다.

 

(2) mutation

GraphQL로 디비에 정보를 바꿀 때는 query가 아니라 mutation으로 요청한다. POST, PUT, DELETE가 모두 Mutation이다. postTeam이라는 명령어에 새 정보를 실어보내려면 다음과 같이 작성하면 된다.

mutation {
  postTeam (input: {
    manager: "John Smith"
    office: "104B"
    extension_number: "#9982"
    mascot: "Dragon"
    cleaning_duty: "Monday"
    project: "Lordaeron"
  }) {
    manager
    office
    extension_number
    mascot
    cleaning_duty
    project
  }
}

 

그리고 다시 query로 팀을 요청해 보면 추가한 팀까지 조회되는 것을 알 수 있다. postTeam이라는 명령어를 사용할 수 있는 이유는 teams.js에 postTeam 명령어와 기능을 미리 정해놨기 때문이다.

const resolvers = {
    Mutation: {
        postTeam: (parent, args) => dbWorks.postTeam(args),
        editTeam: (parent, args) => dbWorks.editTeam(args),
        deleteTeam: (parent, args) => dbWorks.deleteItem('teams', args)
    }
}

 

팀 정보를 수정하거나 삭제할 때에도 Mutaion 하위에 미리 정의한 명령어를 활용하면 된다.

 

2. GraphQL의 장점

 

(1) 필요한 정보들만 선택하여 받아올 수 있다.

- overfetching 문제 해결

- 데이터 전송량 감소

 

(2) 여러 계층의 정보들을 한 번에 받아올 수 있음

- underfetching 문제 해결

- 요청 횟수 감소

 

rest api를 사용하는 서비스에서도 기술적으로 위와 같은 해결 방법이 없는 것은 아니다. 그러나 rest api에 정해진 원칙을 지켜야 하기 때문에 데이터의 소통을 설계하는 데 있어서 제약이 생긴다. GraphQL은 이처럼 다른 형식을 사용하기 때문에 이와 같은 해결책이 가능한 것이다.

 

(3) 하나의 endpoint에서 모든 요청을 처리

- 하나의 URI에서 POST로 모든 요청 가능.

 

대신에 어떤 명령어로 어떤 요청을 할지 쿼리를 날리는 쪽에게 문서로 전달해야 한다.

 

서비스가 어떤 데이터를 어떻게 주고받냐에 따라서 rest api가 더 적합할 때가 있다. 둘의 차이를 이해해야 효율적으로 설계할 수 있을 것이다.