728x90

GraphQL이란

GraphQL은 2012년 페이스북 개발자들이 모바일 어플리케이션을 제작하면서 만든 쿼리 언어이다. SQL과 마찬가지로 데이터베이스의 정보를 질의하는데 사용되지만 그 구조는 매우 다르다. 페이스북 개발자들은 왜 굳이 새로운 쿼리 언어를 만들면서까지 프론트엔드로 데이터를 보내는 방식을 개선하려고 했을까?

 

전통적인 REST API는 오버페칭이나 언더페칭 같은, 데이터를 너무 많이 전달하거나 너무 적게 전달하여 불필요한 데이터 전송을 일으키는 문제를 발생시켰다. 또 REST API의 경우 개발이 계속될수록 점점 더 많은 엔드포인트를 필요로 하게 되어 프로젝트 관리를 어렵게 한다.

반면 GraphQL은 프론트엔드에서 필요로 하는 데이터를 있는 그대로 JSON 형태로 표현하여 되돌려받는다는 장점이 있다. 이름이 필요하면 이름만 요청하고, 목록 정보가 필요하면 목록을 함께 요청할 수 있다. 그것도 단 하나의 엔드포인트에서 말이다.

 

그런데 왜 이름에 ‘Graph’라는 표현이 붙었을까? GraphQL은 모든 데이터가 그래프 형태로 연결되어 있다고 전제하기 때문이다. 일대일로 연결된 관계도, 여러 계층으로 이루어진 관계도 모두 그래프이다. 단지 그 그래프를 누구의 입장에서 정렬하느냐에 따라 트리 구조를 이룰 뿐이다. GraphQL은 그 그래프를 횡단하여 JSON 트리 구조의 질의 결과를 가져오는 것이다.

 

GraphQL 의 구조

쿼리, 뮤테이션(Query, Mutation)

쿼리는 단지 정보를 읽어올 때만 사용하는 것으로 이해하시면 됩니다. 예를 들어 다음과 같습니다.

 

query {
	user {
    	namer
    }
}

 

반면 뮤테이션(Mutation)은 받아온 정보를 변형하고자 할 때 사용합니다. 다시 말하자면, 쿼리가 CRUD에서 R 이라면, 뮤테이션은 CUD 부분을 맡습니다.

 

mutation {
	addMovie(name:"Rocks"){
		name
	}
}

 

Resolver 란?

위에서 Query 와 Mutation 이란 것을 봤는데 GraphQL 은 서버사이드에서 프론트 사이드에 이르기 까지 세가지 혹인 네가지의 큰 축을 이동하게 된다.

 

  • Schema : Query & Mutation 이 요청할 질의의 구조를 미리 정의해둠
  • Query: Schema 에 맞게 서버로 조회 요청
  • Mutation: Schema 에 맞게 서버로 변경 요청
  • Resolver: Query 와 Mutation 이 요청한 Schema에 대한 응답 방식을 결정해 둠

 

728x90