개발관련/자바스크립트 팁

GraphQL 맛보기 강의 ep 01

개발자 Dane 2020. 9. 18. 17:41
반응형

간단한 예제 등을 통해서 빠르게 graphQl 를 체험해보고 이해하는것에 목표를 둔다.

GraphQL 소개

  • Graph Query Language
  • Facebook 개발 GraphQL blog
    • RESTful API 로는 다양한 기종에서 필요한 정보들을 일일히 구현하는 것이 힘들었다.
    • 예로, iOS 와 Android 에서 필요한 정보들이 조금씩 달랐고, 그 다른 부분마다 API 를 구현하는 것이 힘들었다.
  • 이 때문에 정보를 사용하는 측에서 원하는 대로 정보를 가져올 수 있고,보다 편하게 정보를 수정할 수 있도록 하는 표준화된 Query language 를 만들게 되었다. 이것이 GraphQL 이다.

트렌드

 

The State of JavaScript 2019: GraphQL

The State of JavaScript 2019: GraphQL

 

The State of JavaScript 2019: GraphQL

 

2019.stateofjs.com

2019년부터 사용량이 급증하고 있다고 보여진다.

그럼에도 아직 기존 방식이 많이 사용 되고 있으니 미리 Graph Ql 를 학습해 놓는 것도 좋은 방법이다.

효용성

  • 정확히 필요한 데이터만 fetching 할 수 있다.
  • 여러개의 쿼리를 단 하나의 request 로 처리 할 수 있다.
  • 관계형 데이터 베이스를 지원한다. (entitiy 간의 relation을 지원 한다.)

타입

  • Client 와 Server 간의 규약이다.
  • Server side 타입 시스템의 에러를 좀 더 의미있게 할수 있다.
  • 추가 적인 안전 장치가 된다.

단일 endpoint

  • restful 의 경우 return 하는 데이터 형태에 따라 endpoint 가 정해져 있기 때문에 데이터 형태가 변경 되면 endpoint 도 추가 된다.
  • Versionless Api

Any DB

REST vs GraphQL

Blog API 예제

  • post
  • author
  • comment

REST

  • /post/{id}

      {
      id : "post01",
      title : "블로그 제목 입니다.",
      content : "블로그 내용 입니다.",
      user : "user01"
  }

  • /comment/{id}

      {
      id : "comment01",
      post : "post01",
      userName : "악플러다",
      comment : "노잼",
  }

  • /user/{id}

      {
      id : "user02",
      userName : "글쓴이",
      email : "test@xxx"
  }

  • /posts

      {
      lists : [
          "post01",
          "post02",
          "post03"
      ]
  }

이 api 를 가지고 일반적인 최신 블로그의 글 목록페이지를 만든다고 가정해보면 먼저 포스트 리스트의 id를 알기 위해

GET /posts 를 호출

{
    lists : [
        "post01",
        "post02",
        "post03"
    ]
}

이 api 에서는 작성자나 포스트의 제목이 없기 때문에 response 의 포스트 id 리스트를 가지고

GET /post/{id} 를 호출 합니다.

{
    id : "post01",
    title : "블로그 제목 입니다.",
    content : "블로그 내용 입니다.",
    user : "user01"
}
{
    id : "post02",
    title : "블로그 제목 입니다.",
    content : "블로그 내용 입니다.",
    user : "user01"
}
{
    id : "post03",
    title : "블로그 제목 입니다.",
    content : "블로그 내용 입니다.",
    user : "user01"
}

이제 포스트 목록을 보여줄 수 있을 것 같지만 userName 정보가 없어서 글쓴이를 보여줄 수가 없습니다.

그래서 다시 한번 포스트의 user id 정보를 가지고

GET /user/{id} 를 호출 합니다.

{
    id : "user01",
    userName : "글쓴이1",
    email : "test@xxx"
}    
{
    id : "user02",
    userName : "글쓴이2",
    email : "test@xxx"
}

이제서야 블로그 포스트 최신 목록을 보여줄수 있습니다.

실제 현업에서는

GET /recentsposts

{
    posts : [
        {
                id : "post01",
                title : "블로그 제목 입니다.",
                content : "블로그 내용 입니다.",
                userName : "user01"
        },
        {
                id : "post01",
                title : "블로그 제목 입니다.",
                content : "블로그 내용 입니다.",
                userName : "user01"
        }
}

주로 형태의 api 를 추가로 만들어서 사용하게 됩니다.

여기에 추가로 포스트에 달린 댓글을 카운트도 표현해주고 싶다면?

또 API 의 end point 가 추가 되거나 모델이 수정되어야 합니다.

REST API 는 수많은 request 와 end point를 야기 시켜서 유지보수를 어렵게 만듭니다.

GraphQL

단 하나의 request 로 해결 할수 있습니다.

Request

query{
    posts {
        title,
        content,
        user{
            userName
        }
    }
}

Response

{
    posts : [
        {
            title : "최신 포스팅 이외다",
            content : "...",
            user : {
                userName : "글쓴이01"
            }
        }
    ]
}

 

반응형