.png)
GraphQL
GraphQL 은 FACEBOOK이 2012 년에 개발하여 2015 년에 공개적으로 발표한 데이터 질의어이다. 이는 REST 및 부속 웹 서비스의 아키텍쳐를 대처할 수 있다.
설치 및 깃
- Npm Intall and Document
npm install graphql-yoga
- Unchaptered Git Repository (Practice)
project 2021 11 theory graphQL Backend with GraphQL Yoga
project 2021 11 clone movieApp Frontend with React, Apollo
이슈
당신이 RESTful API 에서 fetch 나 axios 를 통해서 데이터를 요청하고 받을 때, 다음의 문제가 발생할 수 있다.
- Over-fetching : 불필요한 데이터까지 Request 되는 문제
- Under-fetching : 여러 번에 걸쳐서 Request 해야 하는 문제
GraphQL 은 데이터 질의어로서, 이를 해결할 수 있는 솔루션을 제공해준다.
자세한 내용은 관련문서 Over-fetching && Under-fetching 을 살펴보자.
Yoga vs. Apollo
GraphQL Yoga는 백엔드용 모듈
GraphQL Apollo는 프론트앤드용 모듈로 사용하자
가장 쉽게 생각할 수 있는 프로젝트 모듈 구조는
-
프론트앤드
1.1. react
1.2. react-router-com@5
1.3. react-helmet
1.4. styled-components
1.5. styled-reset
1.6. dotenv
1.7. prop-types
1.8. aios || fetch
1.9. @apollo/client -
백엔드
1.1. express
1.2. express-session
1.3. morgan
1.4. mongoose
1.5. connect-mongo
1.6. bcrypt
1.7. graphql-yoga -
데이터베이스
3.1. MongoDB
기초이론
GraphQL 는 아래의 구성으로 이루어져 있다.
- Scalar Type
- Query
- Mutation
Scalar Type
단, 모두 대문자로 표기하고 몇 가지 특이한 점이 있다.
Java 의 자료형이나 Javascript 의 자료형과 유사하다.
Query 나 Mutation 안에서 prop-tpyes 와 같은 역할을 한다.
id:IntObject Type
범주에 Scalar Type 이 붙어있는 것을 필드라고 부르고
이 필드들의 집합체를 객체 타입이라고 부른다.
type Movie {
id:Int!
title:String!
}Query
각기 다른 Scalar Type 을 가진 필드들의 집합 이다.
modelName(args:scalar type, ... ):[ObjectName]
type Query {
movies(limit:Int,rating:Float):[Movie]!
movie(id:Int!):Movie
}
type Query {
movies(limit: Int, rating:Float):[Movie]!
movie(id:Int!):Movie
}Mutation
반환된 객체들을 제거하고 뭐시기인데 잘 모르겠다..
핵심이론(미작성)
required 지정
- 스칼라 타입 혹은 스칼라 타입 배열 뒤에 " ! " 를 붙이면 필수값 선언
스칼라 타입(필드)
Java : Basic 에서 나온 자료형과 매우 유사하다. 다른 점은 전부 대문자로 시작한다는 점 정도이다. 그리고 기본 자료형과 객체 참조형을 구분하지 않는 것 같다.
- Int : 32bit 정수
- Float : 실수
- String : 문자열(UTF-8 인코딩)
- Boolean : true || false
- ID : id 값의 명시적 표기, 내부적으로는 String 과 동일
type Movie{ // 이건 객체(후술)
id: Int! // 이것들을 필드라고 한다.
title: String!
rating: Float!
summary: String!
}스칼라 타입 생성
이 기능 때문에 스칼라 타입을 대문자로 쓴 것은 아닐까?
기본적으로 제공해주는 스칼라 타입은 Java 와 같은 객체 참조형 의 성질을 가지고 있고
추가적으로 스칼라 타입을 만든다 라는 개념은 Java 의 멤버변수를 가진 클래스 와 같은 것이다... 라고 생각을 한다.
스칼라 타입 생성은 스키마를 통한 모델 생성과 개념적으로 동질하다.
몽고DB 나 Over-fetching && Under-fetching 포스트를 보면 결국 someSchema 를 통해 someModel 을 만들어낸다.
그리고 데이터 질의어인 GraphQL 또한 schema 모델을 사용하여 스칼라 타입을 만들 수 있다. 해당 모델은 다음과 같고 후술 하겠다.
1. buildSchema : 좀 더 간편하고 직관적
2. GraphQLSchema
객체 타입(필드 객체)
NoSQL based Document 에 최적화된 객체 생성을 지원한다.
express 나 mongoDB 나 express+mongoDB 를 사용해본 사람이라면 매우 익숙한 구조일 것이다.
type Movie{ // 스칼라 타입을 갖는 필드들의 집합체 = 객체
id: Int! // 이것들을 필드라고 한다.
title: String!
rating: Float!
summary: String!
}배열
역시나 Java 나 Javascript 의 배열과 동질하다.
그 외의 특징은 위에 설명한 바와 동일하다.
1. [Int]
2. [Float]
...
인수
GraphQL 에서는 호출할 데이터 타입을 Query 나 Mutation 안에 선언해두어야 한다.
그리고 호출 시에 사용할 인수(arguments) 들을 넣을 수 있다.
마치 메서드나 함수에서 파라미터를 넣는 것과 동일하다.
1. GraphQL Object, Query
type Movie{
id:Int!
title:String!
rating:Float!
summary:String!
}type Query{
movie(id:Int!):[Movie]!
}- GraphQL Resolvers.js
cosnt root={
movie: (args)=>{
console.log(args);
return movie;
}
}열거형
-
열거형은 제대로 공부하지 않았기에 이번 기회에 공부해 보았다. (Java 기준)
-
열거형은 클래스의 일종이다. 참고 블로그
따라서 클래스와 동질적 성격을 가지고 있다.
- 변수 설정 가능
- 생성자 설정 가능
- 메서드 설정 가능
- 메서드 접근 제어자는 private 이다
- 따라서 인스턴스를 생성할 수 없다.
- 상속 또한 금지되어 있다.
enum Season {
봄, 여름, 가을, 겨울
}public class enum_ex {
public enum Season {
봄, 여름, 가을, 겨울
}
}-
GraphQL 에서 열거형은 필드가 범주형 데이터 를 가질 때 유용하게 쓸 수 있다고 정의된다. 여기서 범주형 데이터란, '과일'이나 '야채' 처럼 종류를 나타내는 데이터를 말한다.
-
즉, GraphQL 의 객체에 특정한 스칼라 타입 만 받아들이도록 열거 해둔다라는 관점이다. 참고 블로그
GraqphQL 선언
type Query { product: Product } type Product { id:ID name:String price:FLoat delivery_option:Option } enum Option { SHIP AIRPLANE CAR }Resolvers.js 선언
const root={ product: ()=>{ return { id: "p001", name: "bb-8", price: 99.99, delivery_option: "SHIP", } } };
More
GraphQL 에 대해서 더 알고 싶어서
웹 앱 API 개발을 위한 GraphQL 이라는 도서를 구매해서
이론쪽인 측면에서 더 깊게 공부하였다.
관련 포스트 시리즈를 참고하자.
