[GraphQL]GraphQL의 필요성

GraphQL이 생겨난 이유 : Rest API의 한계

1. Overfetching

아래와 같이 모든 데이터가 필요한 것이 아닌 특정 값만 필요한데, 그 값을 불러오려면 아래와 같이 모든 데이터들을 불러와야 한다. 낭비되는 데이터의 양이 많아진다는 것인데 이러한 것을 overfetching이라고 한다.

    {
        "id": 19,
        "first_name": "Eleanor",
        "last_name": "Smith",
        "sex": "female",
        "blood_type": "B",
        "serve_years": 2,
        "role": "planner",
        "team": 2,
        "from": "Texas"
    }

• Rest API에서는 id가 2인 데이터에서 last_name과 first_name만 필요한데 그 데이터만 가져올 수 없다는 단점이 있다.

• 하지만 GraphQL에서는 아래 사진에서와 같이 id가 2인 데이터에서 manager의 데이터만 가지고 올수 있다.

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

...
결과값

{
	"data":{
    	"team":{
        	"id":"2",
            "manager" : "Stewart Grant"
        }
    }
}

2. Underfetching

원하는 데이터가 여러 계층의 데이터에 걸쳐있다는 문제점이 있다. 특정 데이터를 불러오고 싶으면 Rest api로는 여러번 요청을 보내야 하는 문제점이 생긴다. 한번의 요청에 데이터가 충분히 불러와지지 않는 것을 Underfetching이라고 한다. 한번에 원하는 데이터를 불러오기 위해 GraphQL을 사용하는 것이다.

• 만약 특정 팀의 매니저와 팀원들 명단이 필요할 때 Rest API라면 아래와 같이 두번을 불러와야 한다.

//localhost:3000/api/team?manager=Mandy Warren
[
    {
        "id": 1,
        "manager": "Mandy Warren",
        "office": "101A",
        "extension_number": "#5709",
        "mascot": "Panda",
        "cleaning_duty": "Monday",
        "project": "Hyperion"
    }
]


//localhost:3000/api/people?team=2
[
    {
        "id": 1,
        "first_name": "Alex",
        "last_name": "Davidson",
        "sex": "male",
        "blood_type": "O",
        "serve_years": 2,
        "role": "developer",
        "team": 2,
        "from": "California"
    },
    {
        "id": 5,
        "first_name": "Page",
        "last_name": "Adams",
        "sex": "female",
        "blood_type": "O",
        "serve_years": 5,
        "role": "developer",
        "team": 2,
        "from": "California"
    },
  ...
  ]

• graphQL이란면 아래와 같이 한번만 불러도 원하는 값을 불러올 수 있다.

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

...
// 결과값
{
  "data": {
    "team": {
      "manager": "Stewart Grant",
      "office": "101B",
      "members": [
        {
          "first_name": "Alex",
          "last_name": "Davidson"
        },
        {
          "first_name": "Page",
          "last_name": "Adams"
        },
		...
      ]
    }
  }
}

3. 한번의 요청을 여러 데이터들을 불러들어와 데이터 낭비를 줄일 수 있다.

query {
  teams {
    manager
    office
    mascot
  }
  roles {
    id
    requirement
  }
}
...

결과값

{
  "data": {
    "teams": [
      {
        "id": "1",
        "manager": "Mandy Warren",
        "office": "101A"
      },
      {
        "id": "2",
        "manager": "Stewart Grant",
        "office": "101B"
      },
		...
    ],
    "roles": [
      {
        "id": "developer",
        "requirement": "computer science degree"
      },
		...
    ]
  }
}

4. mutation 새 항목 추가

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

5. mutation 수정

mutation {
  editTeam(id: 2, input: {
    manager: "Maruchi Han"
    office: "105A"
    extension_number: "2315"
    mascot: "Direwolf"
    cleaning_duty: "Wednesday"
    project: "Haemosu"
  }) {
    id,
    manager,
    office,
    extension_number,
    mascot,
    cleaning_duty,
    project
  }
}

mutation 삭제

mutation {
  deleteTeam(id: 3) {
    id,
    manager,
    office,
    extension_number,
    mascot,
    cleaning_duty,
    project
  }
}

결론

• 필요한 정보들만 선택하여 받아올 수 있다.
  • Overfetching 문제 해결
  • 데이터 전송량 감소
• 여러 계층의 정보들을 한번에 받아올 수 있다.
  • Underfetching 문제 해결
  • 요청 횟수 감수
• 하나의 endpoint에서 모든 요청을 처리할 수 있다.
  • 하나의 URI에서 POST로 모든 요청 가능