GraphQL : 시작하기

SNPLab Inc.
5 min readMar 26, 2021

GraphQL 이란 ?

  • 페이스북에서 개발하여 발표한 “API를 위한 쿼리 언어”

→ GraphQL은 API에 있는 데이터에 대해서 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공합니다.

핵심 : 클라이언트가 직접 어떤데이터가 필요한지 명시할 수 있도록 합니다

탄생 배경 (REST API 와 비교)

  • OverFetching

기존의 REST API를 사용할 경우 클라이언트는 불필요한 정보를 전달받는 문제점이 있었습니다.

가령 MemberList 중 id 만을 필요로 한다면 API를 새로 생성하거나 List를 받은 후 2차 가공을 해야하는 불필요한 작업 시간이 낭비되었습니다.

graphQL은 클라이언트 측에서 받고싶은 데이터만을 정의하므로 이러한 OverFetching 문제를 해결할 수 있습니다.

  • UnderFetching

다른 두개의 정보가 필요한 경우 → REST API의 경우에는 필요한 데이터를 만들기 위해 여러번의 API 호출 + 추가적인 가공 작업이 발생합니다.

하지만 graphQL을 사용하게 된다면 쿼리문을 통해 한번의 호출로 원하는 데이터를 얻을 수 있게됩니다.

  • EndPoint

REST API는 각 API마다 다른 엔드포인트가 존재했습니다. 만약 엔드포인트가 수십 수백개가 된다면 이를 관리하는 것은 매우 어려울 것 입니다.

graphQL은 /graphql이라는 하나의 엔드포인트로 모든 쿼리문 요청 받기 때문에 관리가 용이하며 주소가 심플해집니다.

→ default endpoint : /graphql (설정파일을 사용하여 커스터마이징 가능)

GraphQL의 핵심 요소

1. 스키마

  • 데이터 타입의 집합

API 문서와 같은 역할을 하며 리턴 타입 인풋 타입 정의, 조회를 위한 루트 쿼리에 대한 정의 마지막으로 등록, 수정, 삭제를 위한 루트 뮤테이션에 대한 정의를 나타냅니다.

또한 스키마에 정의된 위의 내용들을 어플리케이션의 시작시에 GraphQL 서버에서 감지하여 SpringBoot의 각 필드와 메소드에 매핑을 시켜주는 역할을 합니다. → DataFetcher 내부로직의 실행

# GraphQL Schema 정의type Post {id: ID!title: String!text: String!category: Stringauthor: Author!}type Author {id: ID!name: String!posts: [Post]!}# 루트 쿼리 (Root Query)type Query {recentPosts(count: Int, offset: Int): [Post]!}# 루트 뮤테이션 (Root Mutation)type Mutation {writePost(title: String!, text: String!, category: String) : Post!}

2. Resolver 인터페이스

  • 실제 데이터를 조회 & 가공하는 비즈니스 로직을 수행하는 부분

클라이언트로부터 요청된 쿼리 혹은 뮤테이션에 대하여 반환할 결과를 생성하는 로직을 구현한 부분으로 GraphQL의 서버가 Resolver 구현체를 찾아 쿼리와 뮤테이션에 해당하는 함수로 진입하여 수행하게 됩니다.

graphQL은 세가지 Resolver 인터페이스를 제공하며 아래와 같습니다

3. DataFetcher

  • 스키마에 정의된 필드를 데이터베이스의 필드와 매핑하여 실제로 값을 사용할 수 있도록 작업을 수행하는 부분

스키마에 정의된 이름을 바탕으로 데이터베이스의 테이블 필드와 매핑되어 내부로직이 수행되고 Resolver에서 데이터를 사용할 수 있게 됩니다.

GraphQl의 작업 종류 — 2가지

1. Query

  • 데이터베이스로부터 데이터를 얻어오기 위해 사용하는 것으로

type Query {

쿼리명 : 반환 타입 (!)

}

의 형태로 선언합니다. REST API에서의 POST 기능(조회)을 수행하는 쿼리라고 보면 됩니다.

# 스키마 정의 - 루트 쿼리 (Root Query)type Query {recentPosts(count: Int, offset: Int): [Post]!}# FE에서의 쿼리문 요청Query {recentPosts(count : 1, offset : 3) {titletext    }}

2. Mutation

  • 서버, 데이터베이스 혹은 메모리에서 데이터를 변경할 때 사용하며

type Mutation {

쿼리명(인자명 : 인자타입) : 반환 타입 (!)

}

의 형태로 선언한다. CRUD 중 CRD 요청을 담당한다고 보면 됩니다.

# 스키마 정의 - 루트 뮤테이션 (Root Mutation)type Mutation {writePost(title: String!, text: String!, category: String) : Post!}# FE에서의 쿼리문 요청Mutation {writePost(title : "title", text: "text", category  : "A") {idtitletextcategoryauthor    }}

--

--