GraphQL 를 좀 알아보자.(작성중)

캡틴 노드랭크·2021년 9월 11일
0

GraphQL

목록 보기
1/1

GraphQL vs REST )API

REST API (RESTful API)

우선 REST 조건을 간단하게 요약하면,

  • 자원(Resource)을 URL 끝단에 포함하여 명시해야한다.
    https://community.link/gallery/posts/:id
    https://community.link/gallery/posts

  • 응답에 관련한 행위는 CRUD로 작성한다.

    Create: POST,
    Read: GET,
    Update: PUT, PATCH
    Delete: DELETE

  • HTTP 상태 코드로 표현한다.
    OK:200
    Created: 201
    Not Found: 404

    이렇게 REST API는 정보가 확장되거나, 다른 정보를 요청 시 각각의 Endpoint를 작성해주었다.

  • path variable

posts/:id
posts/:id/edit
  • Query String
/posts?id=1

GraphQL

이제 알아볼 GraphQL은 Graph Query Language의 줄임말이다. Facebook에서 기존 REST API로 다양한 기종에서 필요한 정보들을 구현하는 부분이 힘들었기에 새로 개발한 쿼리 언어이다.

처음엔 나도 데이터베이스 관련 언어인줄 알았으나.. 전혀 아니었다. React도 개발하고 만들고싶은거 다만드는 페북..

GraphQL은 단일 Endpoint로 쿼리를 활용하여 정보를 요청할 수 있다.

/graphql

query{
   movie(id: 1){
     title
     image
     director
     movie_info{
       .....
     }
   }
}

GraphQL은 타입(Type)의 집합으로 이루어져있고, 이런 데이터 타입의 집합을 스키마(Schema)라고부른다.

OverFetching와 UnderFetching

GraphQL 주요 구성요소

A. Query
쿼리는 주로 값을 읽거나 가져오는데 사용한다. CRUD로 따지자면 R에 해당

  • Field
    객체에 대한 특정 필드를 요구하는 방법이다.
{
   hero {
   name 
    }
}
  • Arguments
    특정필드를 조회할 때 전달인자를 통하여 원하는 값을 가져 올 수 있다.

A. Mutation

쿼리와는 반대로 데이터를 수정하거나 생성할 때 사용한다. CRUD에서의 CUD임.

B. Type 과 Schema

Scala 타입

스칼라타입은 어떤 필드의 구체적인 데이터로 해석해줘야할 때 사용한다.

Int : 부호가 있는 32비트 정수.
Float : 부호가 있는 부동 소수점 값.
String : UTF-8 문자열
Boolean : true/false
ID : DB의 Private Key처럼 고유 식별자를 나타낸다.

  • Date 타입을 정의할 떄
scalar Date

Object 타입

GQL 스키마의 핵심 단위이다. 여러가지 스칼라 타입을 갖는 Field들을 객체로 묶는데 JavaScript.의 {key: value}와 유사한 모습으로 객체 타입이라고 부른다.

//Character Type
type Character {
  id: ID!       
  name: String!
  appearsIn: [Episode]!
}
  • 객체 타입: Character
  • 필드 : id, name, appearsIn
  • 스칼라 타입: ID, String, 등
  • ! : non-nullable로 서버는 클라에게 필수로 값을 제공
  • [] : 배열(Array)

List, NON-Null

NON-Null

이 두 타입은 필드는 존재하지 않지만, 스칼라의 배열과 !으로 유효성 검사를 수행할 수 있다.

type Character{
   name: String! // String 타입을 사용하고 null값을 전달 받을경우 오류발생 
   appearsIn: [Episode]! // 마찬가지 배열안에 null만 존재하면 X, null 값 포함 가능 O  
}

LIST

LISTJavaScript와 마찬가지로 데이터의 집합으로 특정 타입의 배열을 반환한다.

type Drive {
 id: ID!
 name: String!
 description: String!
 Status: Boolean!
 Police: Boolean!
 TrafficLight: Boolean!
 Road: String!
 Traffic: [TrafficStatus!]!
}
  • LIST에서 !의 의미

[String] : 리스트 안에 담긴 String는 null이 될 수 있다.

ex) testField: null //valid

[String!] : 리스트 안에 담긴 String는 null이 될 수 없다.
[String]! : 리스트 안에 담긴 String는 null이 될 수 있지만, 리스트 자체는 null이 될 수 없다.
[String!]! : 리스트 안에 담긴 String, 리스트 자체가 null이 될 수 없다.

Enum

어떤 특징을 갖는 값들의 그룹, 일정한 값들의 집합에 대하여 의미를 표현할 수 있는 기능이다.

//임시적인 값으로 0,1,2,3
enum OtherStatus {
  UP,
  DOWN,
  LEFT,
  RIGHT,
}

명시적인 값으로 표현이 가능하다.

enum OtherStatus {
  UP = "LEFT",
  DOWN = "DOWN",
  LEFT = "LEFT",
  RIGHT = "RIGHT",
}

Type

Interface

C. Resolver

리졸버(Resolover)는 GraphQL 쿼리에 대한 응답을 생성하는 함수의 모음이다. 간단하게는 GraphQL 쿼리 핸들러 역할을 한다.

리졸버 함수는 4개의 인수를 가진다.

fieldName:(parent, args, context, info) => {
   result 
}
  • 첫번째 인자 parent: 연쇄적 리졸버 호출에서 부모 리졸버가 리턴한 객체이다.
  • 두번째 인자 args: args로 쿼리에서 입력으로 넣은 인자이다.
  • 세번째 인자 context: context로 모든 리졸버에게 전달한다. 주로 미들웨어를 통해 입력된 값들이 들어있다.
  • 네번째 인자 info: info로 스키마 정보와 더불어 현재 쿼리의 특정 필드정보를 가지고있다.(잘 사용하지 않음)

Query Resolver

Mutation Resolver

profile
다시 처음부터 천천히... 급할필요가 없다.

0개의 댓글