GraphQL이란 뭘까요?

메타에서 사용하는 언어 ..? REST와 비교되는 언어 ?.. 언제가 부터 떴는데 뭔지는 모르고 있던거 ..

그리고 ... 메타와 당근에서 잘 활용한다는 그거 !!!! 뭔지 알아보겠습니다.

공식 사이트 훑어보기

무엇인지 감을 잡으려면 먼저 공식 문서를 보는 편입니다.

공식 사이트 소개글 : https://graphql-kr.github.io/

GraphQL은 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임 입니다. 
GraphQL은 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을
정확하게 요청할 수 있는 기능을 제공하며 시간이 지남에 따라 API를 쉽게 진화시키고 강력한 개발자 도구를 지원합니다.

음 .... 일단 쿼리(질의) 언어 인거 같고 ... 이미 존재하는 데이터로 쿼리를 수행한다고 합니다.

 

또한 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공 하고, 클라이언트에게 필요한것을 정확하게 요청할 수 있는 기능을 제공한다고 합니다.

 

뭔지 잘 감이 안오죠 ?

 

지금 몇몇 단어 들이 있는데 데이터를 표현해, 원하는것을 요청해, 예측 가능한 결과를 얻어 ! 라고 쓰여있습니다.

그리고 아래에 공식 문서에서는 이렇게 설명합니다.

1. 필요한 것을 구체적으로 요청하세요.
2. 단일 요청으로 많은 데이터를 얻으세요
3. 기존 데이터와 코드를 사용하세요
4. 버전 없이 API를 진화시키세요

음 감이 잘 오지 않습니다. 읽어보니 REST API 에 비해 우린 이런이런 장점이 있다 !! 라고 어필하는듯합니다.

 

그리고 이런곳에서 사용한다고 합니다.

 

 

 

 

---

드디어 설명 합니다 !

GraphQL이란 ?

- 메타에서 개발한 API용 쿼리 언어 입니다. API를 개발할 때 사용합니다.
- API에 있는 스키마를 제공합니다.
- 클라이언트에게 정확한 리소스를 요청할 수 있도록합니다.

 

위에서 필요한 것을 구체적으로 요청하세요. 의 진짜 의미는 클라이언트 측에서 정확한 리소스를 스키마를 통해 가져올 수 있습니다. 라는 의미였습니다.

 

GraphQL의 구성요소 입니다.

• schema 스키마 : 클라이언트가 서비스를 통해 쿼리할 수 있는 모든 가능한 데이터를 정의합니다.
• 미리 정의합니다. (타입스크립트 타입과 다름)

 type Character { 
 	name: String!
    appearsIn: [Episode]! 
 }

 

• 쿼리 : 스키마에 정의된 구조를 따르는 데이터에 대한 요청입니다.

쿼리문 예시 
{
	hero{ 
    	name 
    }
}

응답 예시
{
    "data": {
      "hero": {
        "name": "R2-D2"
      }
    }
}

• resolver : 쿼리에서 요청된 데이터를 검색하기 위해 호출합니다.
  • 여러 데이터 소스에서 데이터를 가져와 쿼리구조와 일치하는 응답으로 조립하는 작업이 포함 될 수도 있음
• mutation : 돌연변이 : 서버의 데이터를 수정하는 것
  • CRUD (생성 읽기 업데이트 삭제) 읽기이외의 모든 것을 처리함
• subscription : 데이터 수정에 대한 알림을 받을 수 있습니다.

 

 

예를 들어 책정보를 가져오는 요청을 예시로 들어봅시다.

 

기존의 REST API 요청

- HTTP GET 메서드를 사용해서 요청을 합니다.
- 총 3번의 요청으로 책 정보 저자의 정보 유저의 정보를 가져오게 됩니다.
- 이를 json 응답을 받아와서 요리저리 섞어주고 클라이언트에서 원하는 데이터만 렌더링 해줍니다.
- 이 과정에서 server에서 변경점이 생기면 버전을 붙여서 URL을 업데이트 해줘야 하는 상황도 발생합니다.
- 리소스에 접근하기 위에 클라이언트에서 여러번 요청을 보내야 합니다. 이 과정에서 n+1 문제가 발생해 성능저하가 일어나기도 합니다.

 

 

GraphQL의 요청

- 마찬가지로 HTTP 프로토콜을 이용합니다. 하지만 GET 메서드를 사용하지 않습니다. 왜냐하면 초기에 단 한번의 요청만 날리기 때문입니다. 그 이후로는 쿼리를 이용해서 요청을 날리게 됩니다.
- GraphQL은 사전 정의된 타입(스키마)을 이용해서 쿼리를 날립니다. 이때 특정 리소스에 대한 URI를 사용하지 않습니다.
- 정의된 스키마에서 각각의 리소스에서(책, 저자, 유저)데이터를 끌어와서 하나의 JSON 조립하는 과정을 거쳐 응답을 보냅니다. 복잡한 쿼리를 날릴때 유용합니다.
- 클라이언트는 정의된 스키마의 데이터를 보장받으므로 바로 가져다가 사용할 수 있습니다.

 

 

와 GraphQL은 HTTP 프로토콜을 사용하니까 기존의 REST API 위에서 동작할 수도 있고, 타입으로 사전에 정의하기만 하면 서버에 변경사항에 완전히 대체가 가능하고 (BFF) 아무리 복잡한 요청도 단 하나의 요청으로 딸깍해서 (단일 요청) 클라이언트에서 쿼리로 가져다 쓰면 그만이라고 ?? 이거 완전 개꿀아니냐 ?? 특히 버저닝이 필요가 없다니 모바일에서 더 유용하겠네??? 삐슝빠슝 !!

 

 

 

하지만 이런 고급기술이 마냥 좋을리만은 없겠죠 단점을 알아보겠습니다.

 

---

GraphQL의 단점

• 클라이언트와 서버측에서 다양한 툴이 필요하다. 초기 비용이 많이든다.
• 아무래도 쿼리가 무진장 많이 지게 되면 클라이언트 측에서 쿼리를 작성하는 비용과 스키마 타입을 정의하는데 드는 비용이 만만치 않겠죠 ??
• 그에 따라 다른 개발자들의 비난을 받을 수 있다 > 거의 아키텍처가 변경되는 수준의 기술의 결정일테니까요.
• 그에 비해 REST API는 다른 사람의 API를 사용하기 위해 다른 라이브러리가 필요하지 않음
  curl:// 이나 브라우저 API로 해결이 가능하다.
• graph QL은 단일 진입점을 갖고 post요청을 사용하게 되어 캐시하기가 더 어렵습니다.
• rest에서 HTTP GET 메서드를 사용하는데, 이는 브라우저 CDN 프록시 웹 서버에서 활용되는 잘 정의된 캐싱 동작이 이미 존재합니다.

언제 사용해야 할까 ?

REST API의 경우

• 다양한 사용사례에 적합하다.
• REST API는 그 URI 에 대한 모든 데이터를 반환하기 때문에 관련 데이터를 가져오기 위해 여러 요청이 필요하다.
• 이미 거의 모든 개발자가 알고 있다.
• CRUD 간단한 작업을 잘 처리한다.

예를 들어.

• 제품 주문 고객 정보를 확보할 경우
• 전자 상거래 웹사이트는 REST를 사용하여 탐색, 장바구니, 추가, 구매를 수행할 수 있다

 

 

GraphQL의 경우

• 스키마를 따르는 복잡한 쿼리를 사용하여 단일 요청으로 모든 데이터를 가져올 수 있다.
• 클라이언트는 큰 비용없이 원하는것 데이터를 가져올 수 있다.
• 좀 더 복잡한 데이터 요청이 필요한 애플리케이션에 더 적합하다.
• 여기서 복잡한 데이터란 우리가 가져와여 할 여러 종류(도메인)의 중첩된 데이터를 의미한다.

예를 들어

• 클라이언트에게 금융계획도구를 제공하는 경우
• 은행거래, 투자포트폴리오, 신용 점수를 확인해야 할 수도 있음
• 해당 도구에는 여러 소스가 필요할수도 있음
• 회사는 클라이언트가 . 단한번의 요청으로 모든 데이털를 쿼리할 . 수있는 환경을 구축할 . 수있으므로
• 클라이언트는 필요한 데이터를 정확하게 지정하기만 하면 되고,
• 서버는 리졸버를 사용하여 각 소스에서 데이터를 가져와 쿼리구조와 일치하는 응답으로 조립한다.
• 특정 애플리케이션 아키텍처를 고집하는 것이 아니므로 REST위에 조립할 수도 있음.

 

예시 ) 깃허브 API v4

query{
    repository(owner: "john", name:"Hello-World") {
        issues(last:20, states: CLOSED) {
            edges {
                node {
                    title
                    url
                    labels(first:5) {
                        edges {
                            node {
                            name
                            }
                        }
                    }
                }
            }
        }
    }
}

---

참고 :

https://graphql-kr.github.io/
https://youtu.be/yWzKJPw_VzM?si=k7R9TtZB03eNHYFZ
https://youtu.be/PTfZcN20fro?si=ykJfIZDcga_pFDTw