GraphQL vs RestAPI | GraphQL의 장점 | GraphQL을 사용하는 이유

GraphQL

(GraphQL 이란
GraphQL is a query language for your API, and a server-side runtime for executing queries using a type system you define for your data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.

GraphQL은 API를 위한 쿼리언어이고 데이터에 정의한 타입을 사용하여 쿼리를 실행하기 위한 서버사이드 런타임이다. GraphQL은 특정한 데이터베이스 또는 저장소 엔진에 연결되지 않고 기존 코드와 데이터를 이용해 백업된다.

  • REST API의 한계를 보완하고자 facebook이 개발한 쿼리언어
  • 웹 클라이언트 측에서 서버로부터 데이터를 효율적으로 가져오는 것을 목적으로 하는 쿼리 언어이고 동시에 쿼리문을 통해 데이터를 받을 수 있는 런타임
  • 데이터 객체 간의 관계를 그래프로 표현
  • 단 한번에 필요한 정보만 불러오는 효율적인 API

REST API

  • 웹에서 http프로토콜을 최대한 잘 활용하여 네트워크를 통해 데이터를 주고받기 위해 API(Application Program Interface)를 설계 할 때 지켜야하는 제약 조건
  • 리소스 별로 endpoint를 가진다. endpoint의 집합이라고도 볼 수 있다.

RestAPI vs GraphQL

REST API

  • 각각의 데이터타입에 대한 다수의 endpoint가 존재
  • 필요한 데이터타입마다 네트워크 호출
  • 서버 중심으로 데이터를 설계
  • url과 CRUD메소드의 조합으로 데이터 fetching
  • 캐싱이 쉽다
  • 개발 프로세스
    서버측에서 데이터를 모델링하여 각각의 데이터타입마다 endpoint를 만든다.
    ⬇️
    해당 endpoint별 리소스에 대한 내용을 클라이언트 개발자와 커뮤니케이션한다.
    ⬇️
    클라이언트 개발자는 서버개발자가 구축한 REST API에 맞추어 url과 메소드를 조합해 데이터를 요청한다.

GraphQL

  • 단 하나의 Endpoint가 존재
  • 한 번의 네트워크 호출로 해당 스키마 타입의 데이터를 처리
  • 클라이언트 중심으로 데이터 설계
  • 쿼리를 통해 데이터에 fetching
  • 캐싱이 어렵다
  • 개발 프로세스
    서버측에서는 데이터의 타입들을 그래프로 만들고 각각의 그래프에 대해 쿼리 연결 → 자동으로 트리 구조(+ doc)가 생성된다.
    ⬇️
    클라이언트측에서는 만들어진 트리구조와 Document를 보고 코드를 작성해 선언적으로 데이터를 요청한다.
restAPI vs graphQL

GraphQL이 해결해주는 기존 방식(REST API)의 문제점

  • OverFetching
    REST API는 필요한 정보를 가져오기위해서, 쓸데없는 정보도 같이 가져와야하는 Over-fetching 문제
    ➡️  GraphQL은 필요한 정보만 선택해서 가져올 수 있다.
  • UnderFetching
    REST API는 여러개의 데이터를 가져오려면, 여러개의 요청이 필요하는 Under-fetching 문제
    ➡️  GraphQL은 하나의 요청으로 여러개의 데이터를 한번에 가져올 수 있다.

GraphQL의 이점

  • 빠르고 유연하다
    • 필요한 데이터에 대해서만 클라이언트가 쿼리를 작성하여 요청
    • 선언적 호출로 원하는 데이터를 한 번에 가져올 수있다.
  • 높은 생산성
    • 자동적으로 문서화되므로 문서와 API를 별도로 관리하지 않아도 된다.
      (+ 서버 엔지니어와 클라이언트 엔지니어의 커뮤니케이션 비용 절감)
    • 엄격하게 타입이 정의되어 클라이언트와 서버 간 통신 오류를 줄여줌
    • 백엔드 API에 대한 의존성 낮음
      (클라이언트 개발자는 서버에 저장된 데이터의 구조나 데이터 관계를 이해할 필요가 없다)
  • GraphQL + Apollo Client의 조합으로 Redux를 대체할 수 있다.
    fetch로 API를 가져오고 json파일을 핸들링하고,,,이 작업들을 다 해줌
    app의 local state를 관리하여 Redux를 대체할 수 있다.

Resources