GraphQL 1

공부의 기록·2021년 12월 8일
Quey Languagegraphql
0

Node.JS

목록 보기
32/32

GraphQL

GraphQL 은 데이터 질의어로 쿼리 언어의 일종입니다.
본 문서의 작성 전에 GraphQL.JS, GraphQL Yoga, Apollo 등을 경험해보았습니다.
토이프로젝트를 마쳤으며 관련된 Nest.JS 프로젝트를 진행하고 있습니다.

더하여 기본적인 개요에 대한 설명을 적은 포스트를 적어두었습니다.

본 문서는 웹 앱 API 개발을 위한 GraphQL을 읽고 작성하고 있습니다.

Graph Thoery

ps. 그래프 이론을 몰라도 GrpahQL을 사용하는데 아무 문제가 없습니다.

세상의 대부분은 그래프의 구조를 지니고 있습니다.
수 억명 이상이 사용하는 SNS 도 몇 명으로 이루어진 가족도 까지 말입니다.

그래프 용어로 이들을 아래와 같이 정의합니다.

  1. 노드 | 각 점들
  2. 엣지 | 노드 사이의 연결점

이러한 그래프는 방향성의 존재 유무에 따라 다음과 같이 구분되기도 합니다.

  1. 무방향 그래프
  2. 방향 그래프

오일러의 정리

이러한 그래프의 이론 중의 하나가 오일러의 정리입니다.
이는 다음과 같은 뜻을 가지고 있습니다.

노드에 연결된 엣지의 수가 홀수라면,
각 다리를 한 번만 지나면서 모든 다리를 건너는 것은 불가능하다.

이러한 특징을 가지고 있는 그래프를 우리가 오일러의 경로라고 부릅니다.
이 그래프는 다음과 같은 특징을 가집니다.

  1. 위상이 홀수인 노드가 두 개 이거나,
  2. 모든 노드가 홀 수 위상을 가지고 있습니다.

비슷한 개념으로는 오일러 사이클이 있습니다.
오일러 사이클은 시작점과 도착점이 같은 특징을 추가로 가지고 있습니다.

트리 그래프

트리는 노드가 위계적으로 정렬된 그래프입니다.
그래프를 봤는데 루트 가 있다면 이는 트리 그래프라고 할 수 있습니다.

CEO 에서부터 내려오는 조직도나 Primary Key 를 가지는 DBMS 등이 있습니다.

데이터를 빠르게 찾기 위해서는 각 노드의 깊이를 아는 것이 중요합니다.

서브 트리 그래프

트리는 위계적인 그래프이기 때문에,
내부적으로 또 다른 트리 그래프를 가질 수 있습니다.

이렇게 트리 내부에 존재하는 트리를 서브 트리 라고 부릅니다.

이진 트리 그래프

이진 트리 또한 트리 그래프의 일종입니다.
이진 트리는 자식 노드가 최 대 두 개 뿐입니다.
주로 이진 탐색 트리 가 이에 해당합니다.

관련된 내용은 차후 Search | 이분탐색 에서 더 다루도록 하겠습니다.

GrpahQL 과 SQL

SQL 은 DBMS 를 사용하기 위한 쿼리 언어입니다.
이에서 사용할 수 있는 명령어는 매우 한정되어 있습니다.

  1. SELECT
  2. INSERT
  3. UPDATE
  4. DELETE

최근 처음으로 SQL DB 인 PostgreSQL 을 다루게 되면서 공부하며 느낀 점은
과거 배웠던 GraphQL 과 개념적으로 매우 유사하다는 것이었습니다.

그리고 본문에 의하면,
GraphQL 은 SQL 의 브라우저 버전 이라고 할 수 있습니다.
물론 같은 쿼리 언어이기는 하나, 사용환경이 완전히 다릅니다.

SQL 에서는 SELECT 를 GraphQL 에서는 Query 를 사용합니다.
SQL 에서는 INSERT, UPDATE, DELETE 를 GraphQL 에서는 Mutation 을 사용합니다.

문법

기본 Query, 기본 Mutation 그리고 기본 문법들은 [관련 포스트]((https://velog.io/@unchapterd/%EA%B7%B8%EB%9E%98%ED%94%84QL-GraphQL)를 참고해주시길 바랍니다.

데이터 읽기

프래그먼트

GraphQL 쿼리 안에는
각종 작업에 대한 정의와 프래그먼트에 대한 정의가 들어갈 수 있습니다.
프래그먼트는 셀렉션 세트의 일종이며 여러 번 재사용할 수 있습니다.

쉽게 말하면
쿼리 문의 반복된 부분을 객체 처럼 포장하고 이를 JS 의 스프레드와 같은 기능으로 포장을 뜯음으로써 코드를 줄일 수 있다라는 것입니다.

fragment fragment_name on Trail {
  // 줄여서 쓰고 싶은 코드
}

인라인 프래그먼트

인라인 프래그먼트는 이름이 없습니다.
쿼리 안에서 특정 타입(유니언)을 바로 셀렉션 세트에 넣어 버립니다.

유니언 타입에서 여러 타입의 객체를 반환할 때,
각각의 객체가 어떤 필드를 반환할 것인지 정할 때 인라인 프래그먼트를 사용합니다.

query{
  genres{
    ...on Workout {
      name
      reps
    }
    ...on StudyGroup {
      name
      subject
      students
    }
  }
}

프래그먼트 타입 유니언

이름이 붙은 프래그먼트 타입을 유니언에 정의해놓고 사용할 수도 있습니다.
아래에서 WorkOut 과 StudyGroup 은 유니언 으로 선언된 기존의 쿼리입니다.

query today {
  genres{
    ...workout
    ...study
  }
}
fragment workout on WorkOut {
  name
  reps
}
fragment study on StudyGroup {
  name
  subject
  student
}

인터페이스

인터페이스를 사용하면 쿼리문에게 반환을 강제할 수 있습니다.
만약 genres 라는 필드의 항목이 SomeInterface 를 반환한다고 할 때,
genres 에 정의된 필드의 항목은 모두 반환되어야 합니다.

query some_query {
  genres {
    name
    start
    end
  }
}

여기에 프래그먼트 타입을 써주면
특정 객체 타입이 반환될 때,
필드가 더 들어갈 수 있게 인터페이스 쿼리를 쓸 수 있습니다.

query some_query {
  genres {
    anme
    start
    end
    ...on WorkOut {
      reps
    }
  }
}

데이터 쓰기

Mutation with Scalar Variables

관련 포스트를 참고해주세요.

Mutation with Query Variables

관련 포스트를 참고해주세요.

서브 스크립션

서브 스크립션은 GraphQL 의 세 번째 작업 타입입니다.
서버에서 푸시 중인 업데이트의 내역을 실시간으로 클라이언트에서 받아야 할 때가 있습니다.

이 경우,
데이터 서브 스크립션을 통해서 GraphQL API 를 사용해 실시간 데이터 변경 내용을 받을 수 있습니다.

예를 들면,
웹 페이지에서의 실시간 좋아요 기능 등이 있습니다.
이 기능이 서브 스크립션 기능을 실제 제품에 도입한 사례입니다.

subscription {
  liftStatusChange {
    name
    capacity
    status
  }
}

인트로스펙션

64p
인트로스펙션은 GraphQL 에서 제공하는 강력한 기능입니다.

이를 사용하면 현재 API 스키마의 세부 사항에 관한 쿼리를 작성할 수 있습니다.
이 덕분에 GraphQL 플레이 그라운드 인터페이스에서 솜씨 좋게 GraphQL 문서를 보여줄 수 있는 것입니다.

GrpahQL API 인트로스펙션 쿼리를 사용하면 주어진 API 스키마를 통해
어떤 데이터를 반환받을 수 있는지 조사할 수 있습니다.

추상구문 트리

66p.

profile
공부의 기록
2022년 12월 9일 부터 노션 페이지에서 작성을 이어가고 있습니다.
이전 포스트

TypeORM

0개의 댓글