GraphQL) JSON 더미 데이터와 서버 연결하기

GraphQL이란?

: 페이스북에서 만든 쿼리 언어. SQL과 마찬가지로 쿼리 언어입니다.

- 어떠한 특정 데이터베이스나 플랫폼에 종속적이지 않습니다.

- 서버사이드 gql 애플리케이션은 gql로 작성된 쿼리를 입력으로 받아 쿼리를 처리한 결과를 다시 클라이언트로 돌려줍니다.

- GraphQL은 어떠한 백엔드 프레임워크나 프로그래밍 언어든 함께 사용할 수 있습니다.

 

GraphQL과 SQL의 서로 다른 목적성

• gql : 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적이다.
• sql : 데이터베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적이다.

REST API vs GraphQL

• REST API
  • URL, METHOD 등을 조합하기 때문에 다양한 EndPoint가 존재한다.
  • 앤드포인트마다 DB SQL 쿼리가 달라진다.
• GraphQL
  • 단 하나의 EndPoint가 존재한다.
  • gql API에서는 불러오는 데이터의 종류를 쿼리 조합을 통해 결정한다.
  • gql 스키마의 타입마다 데이터베이스 쿼리가 달라진다.
  • gql을 사용하면 여러번 네트워크 호출을 할 필요 없이 한번의 네트워크 호출로 처리가 가능하다.

---

GraphQL의 메서드

• Query / Mutation
  • 쿼리는 데이터를 읽는데(R) 사용하고,
  • 뮤테이션은 데이터를 변조(CUD) 하는데 사용한다.
• Resolver (리졸버)
  • gql에서 데이터를 가져오는 구체적인 과정은 resolver가 담당하고, 이를 직접 구현 해야 한다.
  • 프로그래머는 리졸버를 직접 구현해야하는 부담은 있지만, 이를 통해서 데이터 source의 종류에 상관 없이 구현이 가능하다.

참고) https://tech.kakao.com/2019/08/01/graphql-basic/

 

---

JSON 파일과 서버 연결하기

 

쇼핑몰 애플리케이션을 만들 때, JSON 형식의 더미 데이터를 서버와 연결해 불러오기로 했다.

이 과정에서 GraphQL을 사용했다.

상품을 조회하는 페이지에서는 PRODUCTS, 사용자가 상품을 추가한 장바구니에서 쓰는 데이터는 CART이다.

1. 읽고, 쓰기가 가능한 JSON 파일 만들기

- JSON 파일을 읽고 쓸 수 있는 함수를 정의한다.

⇒ DB 대신 사용

2. 스키마 정의하기

- GraphQL 스키마의 가장 기본적인 구성 요소는 객체 타입이다.

- 객체 타입은 서비스에서 가져올 수 있는 객체의 종류와 그 객체의 필드를 나타낸다.

- GraphQL 객체 타입의 모든 필드는 0개 이상의 인수를 가질 수 있다.

- GraphQL 에서는 스칼라 타입들이 기본 제공된다.

• Int: 부호가 있는 32비트 정수.
• Float: 부호가 있는 부동소수점 값.
• String: UTF-8 문자열.
• Boolean: true 또는 false.
• ID: ID 스칼라 타입은 객체를 다시 요청하거나 캐시의 키로써 자주 사용되는 고유 식별자를 나타낸다. 

- 장바구니 스키마 정의하기

cartItem 타입에는 id, 가격, 수량이 있고,

cart를 조회하면 cartItem 배열을 반환한다.

카트에 상품을 추가, 수정, 삭제 하는 함수와 결제를 실행하는 함수(실제 결제까진 진행되지 않고, 결제가 완료되었다고 가정하고 장바구니에서 해당 상품이 삭제되는 함수)를 정의한다.

3. 리졸버 구현하기

- Query, Mutation과 같은 타입이 실제로 동작하는 부분. (스키마 함수가 실제로 동작할 행동을 추가해준다.)

- 앞서 정의한 Query의 cart 조회시, db에 있는 cart를 반환해준다.

- 장바구니에 담기 위해서는 addCart에서 cart의 id 값을 가져와 products에 있는 id와, cart의 id를 비교해주고, 만약 둘이 같다면 카트에 추가해주는 식으로 구현해주었다.