GraphQL
개요
-
메타(전 페이스북)에서 정의한 Server API 를 만드는 방법론 중 하나
- 대표적으로 다른 방법론으론 REST API 가 있습니다.
-
동시에 Query Language 이기도 합니다.
-
트리 구조로 결과를 받기 위해 그래프를 탐색하는 쿼리 언어(혹은 방법론)입니다.
특징
-
HTTP 를 통해 API 서버로 요청을 보내고 응답을 받습니다.
- REST API : 데이터의 CRUD 를 위해 각각 HTTP 의 POST, GET, PUT(PATCH), UPDATE 사용
- GraphQL : 데이터의 CRUD 를 위해 HTTP 의 POST 메서드만을 사용하며 Resolvers Mutation(CUD), Query(Read) 사용
-
데이터 결과를 JSON 으로 받습니다.
-
조회 대상 schema 가 유효한지 검사합니다.
GraphQL vs REST API
REST API 의 한계
-
Overfetch : 필요 없는 데이터까지 과도하게 제공
-
Underfetch : endpoint 가 필요한 정보를 부족하게 제공, 여러개의 endpoint에 요청이 강제
-
클라이언트 구조 변경 시 엔드포인트 변경 또는 데이터 구조 수정이 필요합니다.
- Overfecth, Underfetch 단점의 결과
GraphQL 과 REST API 의 차이점
| GraphQL | REST API | |
|---|---|---|
| 리소스 | Schema | HTTP URI |
| 작업 유형 | Query, Mutation 타입 | HTTP Method |
| 리소스 형태 정의와 데이터 요청 방법 | 분리 | 연결 |
| 여러 리소스 접근시 요청 횟수 | 여러 번 | 한 번 |
| 요청 방법 | 필드에 대한 Resolver 호출 | 엔드포인트에 정의된 핸들링 함수 호출 |
GraphQL 장점
-
하나의 endpoint 요청 ✅
-
Over & Under Fetch ❌
-
클라언트 구조 변경시 데이터 구조 수정 필요 ❌
-
강력한 Playground GUI (POSTMAN 과 비슷)
GraphQL 단점
-
GraphQL 학습 비용 소요
-
HTTP POST 메소드만 사용하기에 캐싱 복잡 (Apollo 엔진, 영속 쿼리 필요)
-
고정된 요청과 응답만 필요할때 Query 로 인해 요청 크기 비교적 큽니다.
구조
Query
- 저장된 데이터 가져오기 (Read)
Mutation
- 저장된 데이터 수정하기 (CUD)
- Create
- Update
- Delete
Subscription
- 특정 이벤트가 발생하면, 서버는 대응하는 데이터를 클라이언트에 푸시합니다.
전달인자 (Arguments)
- 쿼리의 필드 및 중첩된 객체들의 원하는 데이터만 받아올 수 있습니다.
별명 (Aliases)
- 필드 이름을 중복으로 사용하여 쿼리를 해야 할 때 별명을 붙여서 쿼리 합니다.
오퍼레이션 네임 (Operation Name)
- 변수명 처럼 오퍼레이션의 이름을 작성합니다.
- 작성하지 않아도 동작하지만 코드를 명확하게 하기위해 작성해야 합니다.
변수 (Variable)
- 동적으로 인자를 받아 쿼리하는 경우에 변수를 사용합니다.
- 실제 앱에서는 대부분 동적인 인자를 사용하여 쿼리합니다.
스키마/타입 (Schema/Type)
- Resolver 에서 사용될 객체의 각 데이터 타입을 나타냅니다.
- 타입스크립트의 인터페이스/타입과 비슷한 개념입니다.
리졸버 (Resolver)
- 정의된 스키마 필드에 사용되는 함수의 실제 행동을 Resolver 에서 정의합니다. (함수)
- 보통 이러한 함수들이 모여 있기 때문에 보통 Resolvers 라고 부릅니다.
참조 : 코드스테이츠 프론트엔드 부트캠프, 카카오 기술 블로그
Aim for the TOP, Developer