GraphQL vs REST

Today lolol·2022년 2월 28일

6주포트폴리오 6주협업프로젝트 CouchCoding graphql 카우치코딩

GraphQL is not database.

REST cons

요즘 웹에서 대부분 요청은 REST를 이용하고 있다. REST API는 명료하고 알아보기 쉽다. frontend와 backend의 의존성이 떨어진다.

하지만 단점은 없을까?

GraphQL

graphql은 REST의 over-fetching, under-fetching 문제를 해결하기 위해 나온 것처럼 보인다. 여기서 over-fetching, under-fetching은 무엇일까?

over/under-fetching issue

REST API workflow. 이미지를 클릭하면 원본 페이지에서 볼 수 있다.

그림에서 나와있듯이 클라이언트는 사용자의 정보, 포스트, follower 수를 얻기 위해 3번의 요청을 했다. 만약 여기에서 클라이언트가 실제로 필요한 정보가 사용자 이름, 포스트 제목들, 팔로워 수였다면, 서버 응답에 포함된 사용자 주소, 사용자 생일, 포스트 콘텐츠 등등은 불필요한 정보이다. 이를 over-fetching(데이터를 더 응답받음)이라고 한다.

반대로 필요한 정보가 위에서 언급된 사용자 이름, 포스트 제목들, 팔로워 수이지만, 처음 요청 /users/<id>의 응답에는 포스트, follower 관련 데이터가 없는 것은 under-fetching(데이터를 덜 응답받음)이라고 한다.

반대로 graphql은 이 문제를 어떻게 해결했을까?

graphql case

GraphQL workflow. 이미지를 클릭하면 원본 페이지에서 볼 수 있다.

단한번의 요청으로 원하는 데이터를 응답받을 수 있다. 아주 깔끔해졌다.

그렇다면 graphql은 어떻게 요청을 보낼까? graphql은 단일 end-point를 갖고 있다. POST request /graphql이다. end-point가 하나고, query를 클라이언트쪽에서 작성한다. 이것이 의미하는 또 하나의 장점이 있다.

more flexible

graphql은 frontend를 좀 더 자유롭게 만들어준다. backend에서 제공하는 한정된 API를 쓰는 것이 아닌 상황에 따라 원하는 데이터만 요청하고, 받아서 사용하면 된다.

이것은 graphql이 생겨나게 된 계기와 유사하다. 2015년 React Conf 영상을 보면, Meta ~~Facebook~~이 왜 graphql을 만들었는지 설명하는 사진이 나온다.

React를 사용해봤다면 컴포넌트가 계층구조를 가지면서 데이터를 다루는 것에 대해서 이미 알고 있을 것이다. React 팀은 위 사진과 같은 상황에서 over/under-fetching이 일어난다고 보았다. 그리고 그것이 애플리케이션을 느려지게 한다고 생각했다. (요청이 많아지니까)

so..

우리는 간략하게 graphql이 무엇인지 알아보았다. 들어보니 REST API를 쓸 이유가 없을 것 같기도 하다? 그럼에도 불구하고 우리는 왜 REST를 사용하는걸까?

Comparison

REST pros

기술을 선택하는 기준은 협업하는 모든 개발자가 알고 있는 기술이어야 한다. 그래야 같이 개발할 수 있다.
의존성이 떨어진다.

GraphQL cons

의존성이 떨어지는 것이 REST의 장점이라면, 혹시 graphql의 단점은 의존성이 높다는 것일까? 그렇다.

맨 처음에 말했듯이, graphql은 DB가 아니다. 동시에 DB query도 아니다.
backend에서 사용가능하도록 허락된 데이터만 접근할 수 있다. (마치 REST에서 여러개의 end-point가 있는 것처럼) 그리고 client(frontend)는 데이터가 어떻게 정의되어 있는지 알고 있어야한다.

그리고 정의된 데이터에 대해 query가 정의되야한다.
~~생각보다. 정말 많이 정의되야 한다.~~

GraphQL pros

하지만 그럼에도 불구하고 graphql은 개발자가 코드를 읽기 더 편하게 만들어준다.

copied from github repo. 아래는 apollo-server schema 예시이다. backend쪽에 구현되어 있다.

const typeDefs = gql`
    """
    fetch our data to client
    """
    type Query {
        "Query to get tracks array for the homepage grid"
        tracksForHome: [Track!]!
    }
    """
    A track is a group of module that teaches about a specific topic
    """
    type Track {
        id: ID!
        "the title of track"
        title: String!
        "the main author of track"
        author: Author!
        "the main illustration for display in track card or track page detail."
        thumbnail: String
        "the track's approximate length to complete, inminutes"
        length: Int
        "the number of modules this track contains"
        modulesCount: Int
    }
    """
    Author of a complete track
    """
    type Author {
        id: ID!
        name: String!
        photo: String
    }
`;