Over-fetching과 Under-fetching 그리고 REST와 GraphQL

주요 개념

• Over-fetching
• Under-fetching
• REST-API
• GraphQL

 

Over-fetching과 Under-fetching은 REST-API의 단점들 중 하나이다. 이 단점은 GraphQL을 사용해 극복할 수 있다.

 

Fig 1. REST vs GraphQL

 

간단하게 Over-fetching은 API를 호출 시 필요보다 많은 데이터(사용하지 않을)를 가져오는 것이다. 예를 들어 대기 오염 물질 중 미세먼지 데이터만 필요한데 온도, 습도, VOC, NO2 등의 다른 데이터까지 한 번에 받아오게 되는 경우가 있다. 그러므로 서버와 네트워크도 불필요한 자원이 추가되게 되고, 클라이언트도 필요없는 데이터를 수신해 자원을 낭비하게 될 수 있다.

Under-fetching은 한 번의 통신으로 필요한 양의 데이터를 가져오지 못한다라는 뜻이다. 따라서 endpoint로의 요청으로는 충분한 데이터를 받지 못하게 되어 두 개 또는 그 이상의 endpoint에 요청을 해야한다. 예를 들어 미세먼지와 온도 데이터가 동시에 필요하다고 가정했을 때 API의 endpoint가 GET /air/{pm25}와 GET /air/{temperature}와 같이 나누어져 있다면 어쩔 수 없이 해당 API를 두 번 호출하여야 한다. 이로 인해 단일 API 호출에 비해 네트워크 오버헤드가 추가되고 결국 앱 속도가 저하되어 유저가 불편함을 느낄 수 있다.

 

GraphQL을 통해 이러한 문제점을 해결할 수 있다. GraphQL 페이스북에서 만든 API를 위한 쿼리 언어이다. GraphQL은 API서버에서 엄격하게 정의된 endpoint 들에 요청하는 대신, 한번의 요청으로 정확히 가져오고 싶은 데이터를 가져올 수 있게 도와주는 쿼리를 보낼수 있다. 즉, user에 대한 몇 가지의 간단한 데이터가 필요할 때, 필요한 만큼의 user 정보를 최적화하여 가져올 수 있다는 뜻이다. 그러므로 GraphQL은 Backend에서의 많은 로직을 Frontend로 분산할할 수 있게 도와준다.

 

아래는 GraphQL의 기본적인 예제이다.

 

우선 단순 쿼리는 아래와 같다.

 

{
	user(id: "100") {
		name,
		phone
    }
}

 

아래는 단순 쿼리의 결과값이다.

 

{
	"user": {
		"id": "100",
		"name": "John Doe",
		"phone": "010-1234-5678"
    }
}

 

여러 리소스를 요청할 때는 아래와 같이 사용한다.

 

{
	user(id: "100") {
		name,
		phone,
		blog {
			title
		}
    }
}

 

아래는 결과값이다.

 

{
	"user": {
		"id": "100",
		"name": "John Doe",
		"phone": "010-1234-5678",
		"blog": [
			{"title": "Alien Coder"},
		]
    }
}

 

---

참고 자료

 

https://velog.io/@e_juhee/Rest-API

 

https://velog.io/@dk-sync/Data-Over-fetching-and-Under-fetching

 

https://devopedia.org/graphql 

 

https://hwasurr.io/api/rest-graphql-differences/