REST API가 물론 편리하기는 하지만 약간의 문제점을 가지고 있습니다. 구글링하시면 많이 보실 수 있는 내용인데... Over-fetching 과 Under-fetching입니다.

Over Fetching은 필요하지 않은 내용을 받아오는 것을 말합니다. 연락처 데이터를 조회하는 경우를 살펴보겠습니다. 한사람의 연락처를 조회할 때 보통은 다음과 같이 요청하고 응답받을 겁니다.

GET /contacts/11235

{ "no":11235, "name":"홍길동", "mobile":"02-1212-3434", "tel":"010-2222-3333", "address":"서울시", "email":"gdhong@test.com" } 

사용자의 정보들중 no, namte, mobile 만 필요한 경우에도 불필요하게 tel, address, email 필드를 항상 받아옵니다. 이것을 필요한 데이터보다도 많은 데이터를 서버가 전송하기 때문에 불필요한 네트웍 트래픽이 발생하게 되죠. 이것을 Over Fetching이라고 합니다.

Under Fetching은 조금 다른 상황에서 발생합니다. 앱의 한 화면에서 보여줘야 할 데이터는 보통 여러가지이죠.. 사용자 정보, 연락처 정보, 뉴스 정보 등이요.. 이를 위해 여러번 GET 하셔야 합니다. 아래 처럼요.

GET /users/21245
GET /contacts/21245
GET /news/favorites

이렇게 되면 서버로의 요청과 응답이 3번 일어나겠군요. Under fetching입니다. REST API로부터 필요한 정보를 받아오기 위해 여러번의 요청을 하는 것을 말하는 것이죠. GraphQL은 이 두가지 문제를 해결해줍니다.

GraphQL 의 핵심 작업은 query와 mutation 입니다. query는 백엔드로부터 데이터를 조회하겠다는 것이고 mutation은 백엔드 서버를 통해서 저장하고 있는 데이터 상태를 변경(추가,수정,삭제 등)하겠다는 것입니다.

제가 테스트할 수 있는 서버를 하나 만들어둔게 있습니다. Playground 기능을 이용해서 테스트해보세요. http://sample.bmaster.kro.kr:8080 에 접속하셔서 화면의 왼쪽에 query를 넣어보세요.

query {
	contactsAll(pageno:1, pagesize:2) {
    contacts {
      _id
      name
      tel
    }
  },
  searchContact(name:"se") {
    _id
    name
  }
}

연락처를 조회할 때 조회가능한 필드는 id name tel address photo 가 있습니다. 이중에서 _id, name, tel만 조회하도록 한 겁니다. 다른 필드를 추가할 수 도 있습니다. 이 부분이 Over Fetching을 방지하기 위한 거죠. searchContact는 연락처를 이름을 이용해 조회하는 건데, contactsAll 쿼리도 병행해서 쿼리하고 있습니다. 한꺼번에 두가지 데이터 집합을 fetching하고 있죠 REST라면 두번의 요청을 했어야 하는 부분입니다.

간단하게만 소개해드려보았습니다.