0407 가이드문서

1. 왜 GraphQL을 사용할까?
2. GraphQL이란

• GraphQL 개념
• GraphQL 특징
• 리졸버란?

3. 개발환경구축
4. Query, Mutation, Resolover 구현

1. 왜 GraphQL을 사용할까? (REST API와의 비교)

기존의 웹·모바일 앱에서 통상적으로 REST API를 채택합니다. REST는 URI를 통해 정보를
주고 받는 형식입니다. API는 지정된 형식으로 요청, 명령을 받을 수 있는 수단입니다.
REST는 Endpoint라는 것이 존재합니다. Endpoint는 API가 서버에서 데이터에 접근할 수 있도록 가능하게 하는 URL입니다.

https://weather.naver.com/today/02117105

이 주소에서는 "today"와 "02117105" 라는 두 개의 Endpoint가 존재하는 것입니다.
REST API는 날씨 정보와 같이 형식이 정해져 있는 정보를 전송할 때는 강력합니다.
하지만 여러 서버에서 다양한 요청들에 대해 응답해야 할 때와 대부분의 요청이 CRUD에 해당할 때는 전송량이 너무 많아집니다. 이로인해 발생하는 문제로는 Overfetching과 Underfetching이 있습니다.

Overfetching & Underfetching

Overfetching은 필요한 것보다 많은 데이터를 가져와 데이터를 낭비하는것 입니다.
사용하지 않을 정보로 인해 데이터가 불필요하게 추가로 사용되는 문제가 있습니다.

https://jsonplaceholder.typicode.com/todos

Underfetching은 필요한 것보다 적은 데이터를 가져와 여러 번 가져오는 것입니다.
여러 번의 API 호출이 필요하므로 요청 횟수가 증가한다는 문제가 있습니다.

query{
  todos(userId : “1”){
          title
  }
  users(id : “1”){
         name
         email
}

예시로 표를 기준으로 3억 3천 3백만 건의 경우 REST API는 한화로 약 140만원이 나오는 것을 알 수 있습니다.

'''Endpoint가 많다는 것은 전송되는 데이터 양이 많아진다는 뜻이고, 데이터의 양이 늘어날수록 데이터 전송료는 기하급수적으로 증가하게 됩니다.'''

이 문제를 해결해주는 것이 GraphQL 입니다.
GraphQL은 이러한 REST API의 문제들을 해결해줍니다. 여러 URL에서 데이터를 불러와야하는 REST와 달리 모든 데이터를 단일 요청으로 가져옵니다. 즉, 최소한의 정보 요청으로 왕복 횟수를 효율적으로 사용함으로 인해 퍼포먼스를 향상시킬 수 있습니다.

2. GraphQL 이란?

2-1 GraphQL 개념

GraphQL은 클라이언트 – 서버 애플리케이션을 위한 데이터 모델의 기능과 요구 사항을 설명하기 위해 생성된 API용 Query 언어입니다. GraphQL은 클라이언트 시스템에서 작성하고, 호출하여 데이터를 효과적으로 가져오는 것이 주 목적입니다.
GraphQL은 REST와 달리 엔드포인트가 단 하나이고, URL이 존재하지 않습니다.
그것은 한 번의 요청으로 원하는 데이터를 가져올 수 있다는 것을 의미합니다.
GraphQL API에서는 불러오는 데이터의 종류를 Query 조합을 통해서 결정합니다.
여기서 Query 조합은 스키마/타입, 쿼리/뮤테이션, 리졸버를 의미합니다.
이제 이 개념들을 알아보겠습니다.

---

2-2 특징

Schema

스키마는 데이터 타입의 집합입니다. GraphQL은 일종의 형식이므로 서버에 요청할 수 있는 데이터에 대한 정확한 표현을 갖는 것이 좋습니다. GraphQL API를 설계할 때엔 스키마를 먼저 정의하게 되며, 스키마에는 어떤 종류의 객체를 반환할 지, 내가 받을 수 있는 데이터는 어떤 종류인지, 어떠한 데이터를 인자로 받는지가 정의되어 있습니다. 이것이 바로 스키마가 필요한 이유입니다.

Type

1. 타입의 종류

• 내장 스칼라 타입 : Int, Float, String, Boolean, ID
  -> 내장 스칼라 타입은 필드를 가지지 않는다.
• 객체 타입 : 필드가 있는 타입, 스키마의 대부분은 객체 타입이다.
  -> 객체 타입은 필드를 가진다.

2. 타입이란 GraphQL의 핵심 단위입니다. 애플리케이션이 어떤 기능을 하는지 타입을 통
   해 알 수 있습니다.
   
   1) Trail은 객체 타입입니다.
   2) Trail 타입은 스칼라 타입인 id~length 필드 5개, 객체 타입인 Ingredient 필드 1개로 이루어져 있습니다.
   3) ! 표시는 NULL 값을 허용하지 않는다는 뜻입니다. 즉 반드시 반환되어야 하는 값
   을 의미합니다.
   4) ID 타입의 형태는 문자열이나 고유한 값인지를 검사해 줍니다

Query

GraphQL에서 Query는 읽기 전용으로 데이터를 가지오기 위한 method입니다. Query를 통해 가져오는 데이터는 객체 단위로 가져와지며, Query는 이름, 변수, 필드 총 3가지 구성요소로 이루어집니다.

Mutation

GraphQL에서 Mutation은 서버측 데이터를 수정하는 method입니다. 추가, 삭제, 업데이트 등을 수행할 수 있습니다. Mutation은 이름, 변수, 필드 총 3가지 구성요소로 이루어집니다.

데이터를 CRUD 할 때 Query와 Mutation을 정의만 한다고 되는 것이 아니라 데이터를 읽어오거나, 삭제하는 기능을 직접 사용자가 구현을 하여야 합니다. 이때 기능 구현을 하는 곳, 쉽게 말해 실제로 데이터를 받아오는 등의 일을 하는 부분을 리졸버(resolver)라고 합니다.

Resolver

리졸버는 클라이언트로부터 요청된 특정 타입에 대해 반환할 결과를 생성하는 함수입니다. 리졸버를 통해 직접 데이터베이스에 연결하거나, 일반 파일 또는 네트워크 프로토콜을 활용하여 데이터를 가져올 수 있습니다.
GraphQL에서는 데이터를 가져오는 구체적인 과정을 프로그래머가 직접 구현을 해야 합니다. 따라서 GraphQL Query는 각각의 필드마다 함수가 하나씩 존재한다고 생각할 수 있습니다. 이 특징이 복잡하다고 느낄 수 있지만, 이러한 특징으로 데이터의 종류에 상관없이 구현이 가능합니다.

4. 개발환경 구축해보기(설치, 필수 패키지)

GraphQL을 간단하게 접해보기 위해 GraphQL를 사용하는 백엔드 서버를 만들어보겠습니다.
만들기에 앞서 본인의 환경에 맞는 Node.js와 visual studio code를 설치해주세요
Node.js 설치 링크 https://nodejs.org/ko/download/
visual studio code 설치 링크 https://code.visualstudio.com/download

비주얼 스튜디오 코드에서 Git Bash 터미널을 켜신 후 다음 명령어를 입력해줍니다.

git clone https://github.com/parkjh96/graphql.git
cd graphql
npm init -y

탐색기나 파일을 클릭하여 폴더 열기를 눌러줍니다. graphql이라는 폴더가 다운받아진 위치를 찾아서 graphql 폴더를 열어줍니다.

이제 graphql-yoga를 통해 graphql yoga서버를 생성해보겠습니다

npm install graphql-yoga

아래의 폴더와 파일들이 생성되었다면 설치를 성공한 것입니다.

서버를 실시간으로 받아오기 위해 nodemon을 설치해주고, 실행한 서버로 접속하면 다음과 같은 Playground를 볼 수 있습니다.

npm install nodemon -g  // nodemon 설치
nodemon src/index.js    // index.js 코드 실행

환경구축이 끝났으니 입력을 한 번 해볼까요?
CRUD에 맞춰 데이터 불러오기와 수정을 해보겠습니다.

먼저, 데이터 불러오기인 R(Read)에 해당하는 query문을 작성해보겠습니다.
Playground의 왼쪽 에디터 페이지에 명령문을 작성하면 오른쪽에 결과가 출력됩니다.

현재 people에는 Jongin, Junha, Jiyoung의 정보가 들어있는 것을 확인할 수 있습니다.

그 다음으로는 C(create), U(update), D(delete)에 해당하는 mutation문을 작성해보겠습니다.

Hyejin에 대한 새로운 정보가 people에 추가되는 mutation문을 작성하였습니다.

mutation 실행 후 데이터가 추가 되었는지 확인하기 위해 다시 people 데이터를 불러와 보겠습니다.

Query 결과를 통해 Hyejin 이라는 데이터가 people에 추가되었음을 알 수 있습니다.

id가 4인 사람을 찾아 데이터를 삭제하는 코드를 작성하였습니다.

다시 Query를 통해 제대로 삭제되었는지 살펴보겠습니다.

Query문을 통해 id가 4였던 Hyejin의 데이터가 삭제 된 것을 볼 수 있습니다.