[GraphQL] 기초 개념, 문법

 

 

GraphQL 이란?

GraphQL 은 Facebook 에서 개발된 오픈소스 데이터 쿼리임

API를 효율적으로 관리하고 사용할 수 있음

 

---

 

GraphQL 왜 사용할까?

기존 REST API 의 단점을 보완하기 위해서 사용함

 

---

 

 

GraphQL 요청방식

• REST API : 특정 엔드포인트(URL)에 요청을 보낸다.
• GraphQL : 단일 엔드포인트를 통해 필요한 데이터를 쿼리로 요청 (한번에 요청 가능)

 

 

GraphQL 데이터 반환 방식

• REST API : 불필요한 데이터까지 과다요청(Over-fetching) , 여러 엔드포인트를 호출해야 데이터를 보을 수 있는 부족한 요청(Under-fetching)
• GraphQL : 정확하게 데이터 요청 가능, 한번의 요청으로 원하는 모든 데이터 포함 가능

 

 

GraphQL 엔드포인트 구조

• REST API : 각각 자원마다 별도의 엔드포인트 제공
• GraphQL : 단일 엔드포인트로 모든 데이터를 요청 (엔드포인트 단일화)

 

 

스키마, 데이터 관리

• REST API : 스키마 정의없이 엔드포인트별로 데이터 설계 (데이터간 관계 표현 어려움, 서버가 반환할 데이터 구조를 결정함)
• GraphQL : 명확한 스키마를 통해 데이터구조를 선언적으로 정의함 (타입간 관계를 명확한 모델링 가능, 클라이언트가 원하는 데이터 구조를 직접 정의할 수 있음)

 

 

스키마 

• 데이터 구조, 관계 설명하는 청사진
  `type Creator { id : ID!, name: String }`

 

엔티티 

• 구조를 따르는 실제 데이터 객체
  `{ "id" : "1", "name" : "anna"}`

 

 

---

 

 

클라이언트

GraphQL 쿼리(Query)를 작성하고 서버로 보냄

 

POST /graphql HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "query": "query getCreator($id: String!) { creator(id: $id) { id name videos { url } } }",
  "variables": {
    "id": "1"
  }
}

 

이런식으로 쿼리를 포함해서 POST 로 넘긴다.

 

 

 

서버

1. 클라이언트 요청을 수신함 : 

2. 쿼리 파싱 or 검증 : 쿼리 필드 확인 or 잘못된 요청(스키마에 없는 필드 요청) 검증

3. 스키마, 데이터 매핑 :  스키마에 정의된 타입, 요청 필드를 매핑하고

4. 리졸버 실행 : 데이터를 가져오기위해 resolver 를 실행함

5. 데이터 반환(JSON) : 데이터 조회 후 요청한 필드에맞게 JSON 타입으로 반환함

 

---

 

 

Type Definition : `type`

데이터 구조를 정의

 

Query: `type Query`

데이터를 요청할 때 사용하는 엔드포인트 정의

 

Mutation: `type Mutation`

데이터를 생성, 수정, 삭제 할 때 사용하는 엔드포인트 정의

 

Scalar Types

기본 스칼라 타입 제공

• Int: 정수
• Float: 부동소수점 숫자
• String: 문자열
• Boolean: 참/거짓 값
• ID: 고유 식별자 (보통 문자열 형태로 사용)

 

Non-Null : `!`

타입 뒤에 ! 를 붙이면 필드 값이 필수

 

Relationships : 관계

타입간 관계 지정 가능

 

주석 : `#`

한 줄 주석만 가능함

 

등등 이외에도 문법은 많음.

 

---

예제

 

type Creator {
	id: ID!
	name: String
	subcribers: Int
	videos: [Video]
}

type Video {
	url: String!
	creator: Creator
}
type Query {
	videos: [Video] # 모든 Video 객체 배열 반환
	creator(id String!): Creator # 특정 Creator 반환 , id 필수로 전달
}

type Mutation {
	createVideo(url: String): Video
	deleteVideo(url: String): String
}

 

 

모든 Video 조회 (데이터 요청)

query getVideos {
  videos {
    url
    creator {
      id
      name
    }
  }
}

 

 

Mutation 예제 (데이터 변경)

mutation createVideo($url: String!) {
  createVideo(url: $url) {
    url
    creator {
      id
      name
    }
  }
}

 

---

 

데이터 요청,변경시에 왜 Query 와 Mutation 으로 나눌까?

 

- 명확한 역할 분리

- API 예측 가능성 유지

 

Query (읽기/조회) : 여러번 호출해도 안변함

Mutation (쓰기/수정) : 여러번 호출하면 중복 작업 발생할 수 있음

 

분리함으로써 데이터 흐름을 잘 설계하기 위함임 !

 

 

 

 

https://www.youtube.com/watch?v=eIQh02xuVw4