Michael Shin

Software Engineer

Michael Shin

Software Engineer

2. GraphQL과 REST API 비교3 min read

Jul 5, 2019

Index

  1. GraphQL 소개
  2. GraphQL과 REST API 비교
  3. NodeJS에서 Graphql과 playground 환경 설정
  4. Graphql 스키마와 타입
  5. Graphql API 쿼리 구조(query와 mutation)

     

    저번 포스트에서 GraphQL이 쿼리 언어로써 갖는 특징과 페이스북이 왜(Why) GraphQL을 만들게 되었는지에 대해 알아보았습니다.

    그렇다면 페이스북은 무엇(What?)이 불편했고 어떻게(How?) GraphQL로 해결할 수 있었을까요?

     

    간단한 예로 REST API와 GraphQL을 비교해 보겠습니다.

    우리는 어떤 블로거가 작성한 포스트에 접속하였습니다.

    위의 그림과 같이 이 페이지에는 간단한 블로거의 정보(아이디와 프로필 사진)와 포스트 정보(작성한 글)를 표시합니다.

     

     

    REST API?

    REST API로 데이터를 요청하기 위해서는 URI에 필요로하는 리소스를 담아야 합니다.

    그리고 우리가 불러올 웹페이지에는 블로거 유저의 정보와 포스트의 정보가 필요합니다.

    먼저 블로거 유저의 정보를 가져오기 위해 “http://…/users/bik5j3l2″로 GET 메서드 request를 서버에 보냅니다.

    그러면 서버는 다음과 같이 유저 정보를 보내주고 위의 그림과 같이 Client 화면에 프로필 사진과 ID를 그릴 수 있습니다.

    {
         "user":{
              "id": "bik5j3l2",
              "userId": "Micheal",
              "phone": "010-0000-0000”,
              "profilePhoto": "http://.../micheal.png"
         }
    }

     

    여기서 봐야 할 것은 “phone” 입니다. 우리가 불러온 웹페이지는 전화번호를 필요로 하지 않습니다. REST API를 사용하면 user의 불필요한 정보들까지 함께 가져와야 합니다.

     

    이번에는 “http://…/users/bik5j3l2/posts”로 GET 메서드 request를 서버에 보내 포스트의 데이터를 가져왔습니다.

    이처럼 REST API를 사용하면 한 페이지의 내용을 완성하기 위해 두 개의 엔드 포인트로 두 번의 request를 하였습니다. 거기에 필요 없는 정보까지 가져왔습니다.

    이 예를 통해서 REST API의 두 가지 단점을 볼 수 있었습니다. 그렇다면 이 문제를 GraphQL로 어떻게(HOW) 해결하였을까요?

     

     

    GraphQL

    GraphQL을 이용하면 훨씬 더 간소화된 방법으로 데이터를 가져올 수 있습니다.

    query {
       User(id: "bik5j3l2") {
              userId
              profilePhoto
              posts {
                   title
                   content
         }]
    }

    화면을 그리기 위해 필요로 하는 데이터를 입력한 쿼리를 위와 같이 만들고 GraphQL의 엔드 포인트로 보내면 다음과 같은 데이터를 받을 수 있습니다.

        "user":{   
            "userId": "Micheal",     
            "profilePhoto": "http://.../micheal.png"
            "posts":[{
                   "title": "RestAPI?",
                   "content": "Lorem ipsum..."
         }]
    }

    위의 쿼리와 받아온 데이터를 보면 완벽히 대칭이라는 것을 볼 수 있습니다. 원하는 데이터로 작성한 쿼리를 만들고 필요로 하는 데이터만 단 한번의 요청으로 받아 올 수 있습니다.

    이렇게 하면 서버 요청 횟수를 줄이고 응답받는 데이터의 사이즈도 줄 일 수 있습니다.

    GraphQL은 하나의 엔드 포인트로, 필요로 하는 쿼리를 만들어, 요청하는 식으로 REST API의 두 가지 단점을 극복하였습니다.

     

     

    GraphQL의 한계

    GraphQL에도 단점은 있습니다.

    GraphQL은 단순 텍스트 데이터를 다룰 경우 강력하지만 이미지나 동영상 파일의 업로드, 다운로드에는 추가적인 도구를 필요로 합니다.

    GraphQL로 파일을 주고 받는 일은 매우 번거로운 일입니다.

    하지만 해결법은 단순합니다. 이럴 경우에는 REST API를 사용하는 것입니다.