GraphQL

JavaScript React

GraphQL?

GraphQL은 Meta(전 Facebook)가 만든, API를 위한 데이터 쿼리 언어이다. 클라이언트는 필요한 데이터의 구조를 지정하고, 서버가 해당 구조로 json 데이터를 반환한다는 특징이 있다. REST API의 고정된 형식이 아닌 클라이언트 요청에 따라 유연하게 커스터마이징할 수 있어 효율적인 통신이 가능하고, 대용량의 필요한 데이터를 수집하는 데 유용하다.

특이사항

  • 모든 클라이언트 요청은 POST 메소드를 사용한다.
  • POST만을 사용하는 만큼 다른 메소드에 해당하는 HTTP캐싱 지원을 받기 어렵다.
    • Apollo 내부 캐싱 지원을 이용할 수 있다.

REST API vs GraphQL API

1. 리소스 정의 ~ 형태 결정 방식의 차이

  • GraphQL에서는 모델 정의가 Schema에서 완성되면 리소스 형태 및 크기는 클라이언트에서 커스터마이징해서 결정 가능하다.
  • REST API는 모델 정의 및 형태 모두 서버단에서 결정된다.

2. 함수 이름의 차이

  • REST API는 API 이름이 마치 홈페이지 주소처럼 생겼다.
  • GraphQL API는 API 이름이 일반적인 함수와 같다.
REST API GraphQL API
mysite.io에서 1번 게시글 조회 https://mysite.io/board/1 board(1)
mysite.io에서 'Tom' 프로필 조회 https://mysite.io/user/Tom user('Tom')

3. 응답 결과물의 차이

  • REST API는 응답 결과로 백엔드에서 보내주는 모든 데이터를 받게 된다. 받은 후 후처리를 하면서 원하는 데이터 형식으로 변환시킬 수 있다.
  • GraphQL API는 백엔드에서 보내주는 데이터 중 필요한 데이터만 골라 받을 수 있다.

4. 사용하는 통신 라이브러리의 차이

REST API GraphQL API
axios apollo-client

5. CRUD 메서드의 차이

REST API
(axios)
GraphQL API
(apollo-client)
Create POST MUTATION
Update PUT
Delete DELETE
Read GET QUERY
  // CRUD in Axios
  import axios from 'axios'

  const result = axios.post(...)
  const result = axios.put(...)
  const result = axios.delete(...)
  const result = axios.get(...)
  // CRUD in Apollo
  import { useMutation, useQuery }from '@apollo/client'

  const result = useMutation(...)
  const result = useQuery(...)

참고
GraphQL is the better REST 5 Top Reasons Why and How to use GraphQL