[TIL] #28. graphQL

2022.8.2. (화)

1. 오늘의 소감

• 못했네~ 못했네~ 오늘도 과제를 못 풀고 실시간 세션을 들으러 가네~~
• 확실히 graphQL 이 더 작성이 편하고 직관적이고 유연하게 사용하기 좋아보인다. 하지만 현업에서는 아직 fetch 와 axios 를 더 많이 쓴다고 한다🥲. 나중에 실무에서 graphQL이 도입될 때 헤매지 않을 정도로 익혀두어야 겠다…!!

2. 학습한 키워드

• 그래프, 트리, GraphQL vs REST API, GraphQL 장단점, 오퍼레이션 타입, query, mutation, subscription, 필드, 전달인자, 별명, 쿼리 변수, 스키마/타입, !, 리졸버

3. 키워드를 바탕으로 학습 내용 설명해보기

• GraphQL의 개념
• GraphQL 은 페이스북에서 개발한 API용 쿼리 언어다. GraphQL의 가장 큰 특징은 ‘정보를 요청하는 쪽에서 원하는 대로 정보를 가져오고 수정할 수 있다’는 것이다. 이는 GraphQL이 만들어진 이유이기도 하다. 필요한 데이터를 결정하고 받는 주체가 ‘서버'가 아닌 ‘클라이언트'가 되도록 만든 것이다!
• GraphQL의 특징
  1. GraphQL은 HTTP 를 통해 API 서버로 요청을 보내고 응답을 받는다.
  2. 응답은 JSON 형식으로 받아진다.
  3. GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 리졸버 함수로 각 필드의 데이터를 조회할 수 있다. (in server)
  4. GraphQL 라이브러리가 조회 대상 스키마(리소스)가 유효한지 검사한다.
• GraphQL이 왜 자료구조로 Graph를 선택했을까?
• 그래프란 노드(or 정점)들이 간선으로 연결된 자료구조이다. 그래프는 신기하게도 ‘누구'의 입장에서 정렬하느냐에 따라 트리 구조로 만들 수 있다. GraphQL은 이러한 그래프의 특징을 이용하여 클라이언트 요청에 따라 유연하게 ‘트리 구조의 JSON 데이터'로 응답이 가능하다.
• GraphQL과 REST API의 차이
  1. 데이터 요청 방법이 다르다.
  2. REST API는 리소스와 데이터 요청 방법이 연결되어있다. 즉, 특정 리소스를 받기 위해서는 특정 URI로 요청을 보내야한다. 반면에 GraphQL은 하나의 URI로 모든 리소스를 요청할 수 있다.
  3. 리소스 크기와 형태를 결정하는 주체가 다르다.
  4. REST API는 주체가 서버이고, GraphQL는 주체가 클라이언트다.
  5. 리소스 구성과 작업 유형 분류가 다르다.
  6. REST API 에서는 URI 가 리소스를 가리키고, 작업 유형은 Method 라고 부르며 get, post, delete, put, patch 가 있다. GraphQL은 스키마가 리소스를 가리키고, 작업 유형은 query, mutation, subscription 이 있다.
  7. 여러 리소스를 받아오는 방법이 다르다.
  8. REST API 는 여러 리소스를 받아오려면 각각 해당하는 URI 로 요청을 여러 번 해줘야한다. GraphQL은 한 번의 요청으로 여러 리소스에 접근 가능하다.
  9. 리소스 처리 방식이 다르다.
  10. REST API는 각 엔드포인트에 정의된 핸들링 함수를 호출해 처리한다. GraphQL 은 각 필드 담당 리졸버를 호출하여 처리한다.
• GraphQL의 장점 및 단점
  < 장점 >   
  
  1. 하나의 엔드포인트로 요청한다. 이때 모든 클라이언트 요청은 POST 다.
  2. underfetching & overfetching 이 없다! 하나의 엔드포인트에 쿼리를 이용해 딱 필요한 데이터만 정확하게 요청하고 받아온다.
  3. playground 라는 GUI를 제공하기 때문에 리졸버와 스키마를 한 눈에 보고 테스트 가능!
  4. 👉  playground
  5. 🔥 클라이언트 구조 변경에도 지장이 없다. 어차피 엔드포인트도 하나이고 데이터를 결정하는 주체가 클라이언트이기 때문에 쿼리 필드명만 제대로 사용하면 상관 없다.
  < 단점 >
  1. 캐싱이 REST API 보다 복잡하다. HTTP에선 각 메소드마다 적합한 캐싱이 구현되어있지만 GraphQL은 POST 메소드만 쓰기 때문에 적합한 캐싱을 지원받을 수 없다.
  2. → ❓추가 공부 : 이걸 보완하기 위해 Apollo 엔진의 캐싱과 영속 쿼리가 등장했다고 한다.
  3. 고정된 요청과 응답만 보낼 경우 REST API 보다 요청 크기가 크다. 또한 이 경우 오히려 REST API 가 응답이 빠를 수 있다. 정해진 걸 바로 전달해주기만 하면 되기 때문.
• GraphQL query 작성하는 법

오퍼레이션타입 오퍼레이션네임 ($변수: 변수값) {
    필드(전달인자: 변수값) {
        필드1
        별명1: 필드2 (전달인자: "id")
        별명2: 필드2 (전달인자: "id")
    }
}

//실제 쿼리
query HeroFriends ($Episode: ch2) {
    hero(episode: $Episode) {
        name
        luke: friends (id: "R01")
        jedi: friends (id: "D03")
    }
}

• GraphQL mutation 작성하는 법

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

• 추가공부 ❓ GraphQL의 스키마와 타입

4. 어려웠던 키워드

• 리졸버, 스키마/타입