코드노트

GraphQL 정리, RESTful API와 차이 정리 본문

Code note/codenote

GraphQL 정리, RESTful API와 차이 정리

코드노트 2023. 10. 16. 23:51

GraphQL란?

GraphQL은 페이스북에서 개발한 데이터 쿼리 및 조작 언어이다.

클라이언트가 필요한 정확한 데이터를 서버에 요청할 수 있다.

 

RESTful API는 GET 메서드 등을 사용하여 서버에 요청하여 정해진 데이터를 받게 되지만

GraphQL을 사용하게 되면 클라이언트가 서버에서 받아야할 데이터의 구조를 명시할 수 있어 필요한 데이터만 받아 사용할 수 있게 해준다.

 

GraphQL은 REST의 부족한점을 보완하기 위해 나왔다.

주요 특징과 차이점을 살펴보고 상황에 맞게 사용할 수 있으니 알아보자!


GraphQL의 주요 특징 및 GraphQL과 차이점

데이터 오버페칭과 언더페칭 문제 해결

- RESTful API

REST는 각 리소스를 고유한 URL로 표현하며, HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 해당 리소스를 조작한다.

이 때문에 클라이언트가 원하는 데이터를 얻기 위해 여러 엔드포인트에 걸쳐 여러 번의 요청을 보내야 할 수 있다.
- GraphQL

GraphQL은 단일 엔드포인트에서 클라이언트가 필요한 데이터만 정확하게 요청할 수 있도록 해준다.

즉, 클라이언트는 한 번의 요청으로 필요한 모든 정보를 가져올 수 있으며, 이는 오버페칭과 언더페칭 문제를 해결해준다.

 

강력한 타입 시스템

- RESTful API

REST API는 타입 시스템을 명시적으로 지원하지 않는다. 따라서 개발자들은 일관된 데이터 구조를 유지하기 위해 추가적인 노력을 기울여야 한다.
- GraphQL

반면에 GraphQL은 강력한 타입 시스템을 가지고 있어 API 스키마 내에서 일관된 데이터 구조를 보장한다.

 

실시간 업데이트 지원

- RESTful API

REST에서 실시간 업데이트를 제공하기 위해서는 별도의 솔루션(예: WebSockets)을 도입해야 한다.

- GraphQL

반면에 GraphQL은 Subscriptions 기능을 통해 실시간 업데이트 기능을 제공한다.

 

- API 버전 관리 불필요

- RESTful API

REST에서 새로운 기능 추가나 변경사항이 생긴 경우, 종종 새로운 버전의 API(v2, v3 등)가 필요하게 된다.
- GraphQL

하지만 GraphQL에서는 필드 추가나 변경사항이 생겨도 기존 쿼리가 계속 동작하므로 별도의 버전 관리가 필요 없다.

 

 

- 가볍게 알아보자면 받아올 데이터를 명시하고, 클라이언트에서 필요한 데이터를 요청한다, 그리고 서버에서 예측한 데이터를 받아와서 사용할 수 있다.


GraphQL의 장점

- 프론트엔드 개발자는 백엔드 개발자가 REST API 개발을 마칠때까지 기다리지 않아도 된다.

- REST를 이용할 때 필요한 데이터를 만들기 위해서 여러 요청을 보내게 될 때 GraphQL은 한 번의 요청으로 데이터를 가져올 수 있다.

- Sechema를 작성하기 때문에 데이터가 어떻게 이루어져 있는지 알 수 있다.

- Type을 작성하기 때문에 요청과 응답에 Valid 한 데이터가 오고 갈 수 있다.

GraphQL의 단점

- 러닝커브가 생긴다.

- 백엔드에 Schema 및 Type을 정의해줘야 한다.

- REST API보다 데이터 캐싱하는게 까다롭다.


GraphQL 사용해보기

 

SWAPI GraphQL API

 

graphql.org

GraphQL을 사용해볼 수 있는 곳이다. 여기서 간단한 테스트 작업을 해보자.

 

 

SWAPI - The Star Wars API

What is this? The Star Wars API, or "swapi" (Swah-pee) is the world's first quantified and programmatically-accessible data source for all the data from the Star Wars canon universe! We've taken all the rich contextual stuff from the universe and formatted

swapi.dev

다른 api를 사용해도 무관하지만 이 api를 사용해봤다.

 

기존 API 응답 값

{
	"name": "Death Star",
	"model": "DS-1 Orbital Battle Station",
	"manufacturer": "Imperial Department of Military Research, Sienar Fleet Systems",
	"cost_in_credits": "1000000000000",
	"length": "120000",
	"max_atmosphering_speed": "n/a",
	"crew": "342,953",
	"passengers": "843,342",
	"cargo_capacity": "1000000000000",
	"consumables": "3 years",
	"hyperdrive_rating": "4.0",
	"MGLT": "10",
	"starship_class": "Deep Space Mobile Battlestation",
	"pilots": [],
	"films": [
		"https://swapi.dev/api/films/1/"
	],
	"created": "2014-12-10T16:36:50.509000Z",
	"edited": "2014-12-20T21:26:24.783000Z",
	"url": "https://swapi.dev/api/starships/9/"
}

 

특정 값만 가져오기

- name, model만 사용하고 싶다면? 이렇게 원하는 데이터만 받아올 수 있다.

 

 

 

- 처음에 이야기한대로 GraphQL은 처음에 데이터가 어떻게 되어있는지 알고 있어야한다.

그에 대한 명시도 Docs -> query: Root를 보게 되면 Schema가 작성되어있는걸 볼 수 있다.

 

 

 

다른 API 값 한번에 들고오기

- Rest API를 사용했다면 starship, species 값을 각각 요청해서 들고와야하지만 GraphQL을 통해서 한번에 받아올 수 있다.

 

 

여러개의 특정 값 한번에 들고오기

 

 


이번 사이드 프로젝트에서도 사용해보고 싶었지만 개인 플젝에서 express를 사용해서 연습을 더 해봐야겠다.

그리고 이후에는 Apollo Server에 대해서도 블로그를 정리해봐야 겠다!