[React] Graphql 알아보기

소개

FaceBook이 만든 쿼리 언어

https://graphql.org/

GraphQL | A query language for your API

Graphql 란?

• vs SQL → Server 와 Web Client 간의 질의어
• vs REST API → 다중 엔드포인트 ⇒ 단일 엔드포인트
• Overfetching 문제 → 필요한 데이터만 요청
• Underfetching 문제 → 한번의 요청으로

---

 

API를 위한 쿼리 언어 이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임 이다.

하나의 request로 많은 resource를 가져갈 수 있다.

{
    hero {
        name
        height
        mass
    }
}

👨🏻‍💻 쿼리언어?

SQL(Structrued Query Language) : 구조화된 질의어

RDBMS (관계형 데이터베이스 관리 시스템)의 데이터 관리를 위해 설계된 언어

DB로부터 데이터를 효율적으로 가져오기 위해

 

 

👨🏻‍💻 GraphQL

Graph Query Language

서버로부터 데이터를 효율적으로 가져오기 위해

 

REST API vs GraphQL API

REST API 는 endpoint가 따로따로 되어있다.
하지만 GraphQL은 여러가지 요청을 하나의 endpoint로 요청한다.

---

리소스

리소스 모양과 크기는 서버에 의해 결정된다. ( REST API ) 수동적이다.
vs
클라이언트가 필요한 리소스를 요청한다. ( GraphQL API ) 적극적,주도적 이다.

---

엔트포인트

다중 엔드포인트, URL과 Method에 따라 접근할 수 있는 데이터가 다르다.
vs
보통 단일 엔드포인트, GraphQL 스키마에 따라 데이터가 다르다.

 

---

라우트 핸들러와 리졸버

각 요청은 정확히 하나의 경로 처리 함수를 호출
vs

하나의 쿼리가 여러 리졸버를 요청하여 여러 리소스가 포함된 충첩 응답 구성

 

GraphQL은 구체적인 데이터 요구 사항이 포함된 단일 쿼리로 요청가능

사용자 / 게시물 / 팔로워 데이터를 받아오려면

query{
    User(id : "fdjklfsd21") {
        name
        posts { title }
        followers { name }
    }
}

REST API는 overfetching 과 underfetching을 유발시킨다.

사용자 이름만 알고 싶은데
/users/ 호출하면 서버가 정해둔 모든 데이터를 받아오게 된다.

 

사용자 정보랑 팔로워 알고 싶은데,
/users/ 호출하고
/users/followers 호출해야 한다.

 

• 프론트엔드에서 신속한 제품 이터레이션을 돌릴 수 있다.
  (서버에 매번 API 요청을 하지 않아도 됨.)
• 백엔드에서 분석이 가능하다
  (프론트엔드에서 어떤 데이터를 가져다 쓰는지 알 수 있게 되므로)
• 스카마 및 타입 시스템의 이점이 있다.
  (프론트엔드와 백엔드가 사용하는 데이터 구조를 맞출 수 있음)

---

 

쿼리 & 뮤테이션 정리

• 뮤테이션 → 데이터의 수정을 가하는 방법
• Apollo graphQL → 다양한 기능이 추가된 라이브러리
• 뮤테이션 다중 필드 → 순차 실행 (쿼리는 병렬)
  • 인라인 프래그먼트 → interface / union 일때 사용

---

뮤테이션

지금까지 GraphQL에 대한 대부분의 이야기는 데이터 가져오기(fetch)에 초점을 맞추었습니다.

하지만 완전한 데이터 플랫폼은 서버 측 데이터를 수정할 수도 있어야합니다.

 

REST에서는 모든 요청이 서버에 몇 가지 사이드이펙트을 일으킬 수 있지만 규칙에 따라 데이터 수정을 위해 GET 요청을 사용하지 않습니다. GraphQL도 마찬가지입니다.

 

기술적으로는 어떠한 쿼리든 데이터를 수정할 수도 있습니다. 하지만 변경을 발생시키는 작업이 명시적으로 뮤테이션를 통해 전송되어야 한다는 규칙을 정하는 것이 좋습니다.

 

쿼리와 마찬가지로 뮤테이션 필드가 객체 타입을 반환하면 중첩 필드를 요청할 수 있습니다. 이는 변경된 객체의 새로운 상태를 가져오는 데에 유용합니다. 간단한 뮤테이션 예제를 살펴 보겠습니다.

mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

# VARIABLES
{
  "ep": "JEDI",
  "review": {
    "stars": 5,
    "commentary": "This is a great movie!"
  }
}

# RESULT
{
  "data": {
    "createReview": {
      "stars": 5,
      "commentary": "This is a great movie!"
    }
  }
}

createReview 필드가 새로 생성된 리뷰의 stars 와 commentary 필드를 반환합니다. 이는 하나의 요청으로 필드의 새 값을 변경하고 쿼리할 수 있기 때문에 기존 데이터를 변경하는 경우(예: 필드를 증가시킬 때) 특히 유용합니다.

 

이 예제에서 전달한 review 변수는 스칼라값이 아닙니다. 인자로 전달될 수 있는 특별한 종류의 객체 타입인 input object type 입니다. 스키마 페이지의 입력 타입에 대해 자세히 알아보세요.

 

---

 

Facebook에서 GraphQL을 만든 이유는?

-> ( FE 개발자가 이것저것 하게 해주고 싶어서? BE 개발자가 없어서? ) 의사소통의 비용을 줄이기 위해서

같은 DB로 다양한 UI를 구상할 필요가 있었음

 

Facbook의 같은 홈 화면이어도,
모바일 웹 / 모바일 앱 (IOS, Android) / PC 웹
경우 각각 다른 UI로 화면을 구성할 필요가 있었음.

 

게시글에 대해서도 보여주는 데이터가 제각각
이런 상황을 해소하기 위해 기존의 REST API 방식과 다른 접근을 한듯

 

UTM 링크