[graphql] GraphQL을 배워보자

박소정·2023년 4월 8일
0
post-thumbnail

SQL

query language는 데이터베이스에 접근해 데이터를 조회, 수정, 추가, 삭제 등을 처리하는 언어이다.

GraphQL

GraphQL = SQL + API

페이스북에서 만든 쿼리 언어이다.
GraphAL은 API를 위한 쿼리 언어이며 타입 시스템을 사용하여 쿼리를 실행하는 서버사이드 런타임이다.

https://graphql-kr.github.io/learn/

장점

  1. 필요한 정보를 구체적으로 요청할 수 있고, 필요한 정보만 받아올 수 있어 over-fetching을 막을 수 있음
  2. 단일 요청으로 많은 데이터를 얻을 수 있음
    • 기존의 REST API는 필요한 데이터가 흩어져 있어 한번의 호출에 필요한 정보를 다 받아오지 못하는 under-fetching이 일어날 수 있고, 필요한 데이터를 받기위해 여러번 호출해야하는 상황이 발생함
  3. 자동으로 생성되는 API 명세 (graphql playground)
  4. 한 개의 URL로 해결 가능

단점

  1. 개발 서버의 구조가 REST API 보다 복잡해진다.
  2. 파일 업로드 형식에 제한이 있다.
    • multipart/form-data 형식을 받을 수 없고 application/json 형식만 받을 수 있음
  3. client에도 스키마를 가지고 있어야 요청할 수 잇음

GraphQL의 구성요소

Query

데이터 조회
조회에 필요한 조건들을 만들어 서버에 요청도 가능

아래의 사진처럼 1개의 포스트만 가져오라는 조건을 줘서 가져올 수 있고,
포스트에 코멘트를 작성한 유저의 포스트의 제목들만 가져올 수도 있다.

Mutation

데이터의 추가, 수정, 삭제

mutation {
	mutation 이름 (input1:"value1", input2: "value2") {
    	return value 1
        return value 2
        return value 3
    }
}

schema

GraphQl의 구조 및 형태를 정의
int, float, string, boolean, id로 이루어진 기본 scalar 타입이 있고,
기본 scalar 타입을 베이스로 커스텀 타입을 만들 수도 있음
Query, Mutation 등도 Schema로 정의해햐 호출 가능

scalar 스칼라 이름 -- String, Int ...

type 타입이름 {
  ... 사용자 정의 타입정의
  } 
type Mutation {
	Mutation1
    Mutation2
    Mutation3
  }
  Query, Mutation 등 기본 Type
type Sample {
Tests: [test] // 사용자 정의 타입이 배열로 오는데, null 이 있어도 상관없음
Tests: [test!] // 받아온 배열에는 null이 있으면 안되지만 결과는 null이어도 됨
Tests: [test]! // 받아온 배열에 null 이 있어도 되지만 결과 자체는 null 이면 안됨
Tests: [test!]! // 받아온 배열, 결과 모두 null이 되면 안됨!

interface

중복해서 사용해야 하는 필수 타입을 정의

interface TypeCommon {
	_id: ID
	name: String
}

type Worker implements TypeCommon {
	_id: ID
    name: String
    humanType: String
}

Union

Query 호출 분기에 따른 타입 리턴

union BelongTo = School | Worker
type Worker implements TypeCommon {
	_id: ID
    name: String
    humanType: String
}
type School implements TypeCommon {
	_id; ID
    name: String
    location: String
}
type Query {
	belongs:[BelongTo]
}

⬇️

query {
	belongs {
    	...on Worker {
        	name
            humanType
        }
        ...on School {
        	name
            location
        }
    }
}

enum

타입에 들어갈 값들을 미리 정의

enum Blood{
	A
    B
    O
    AB
  }
  
 type Human {
 	humanName: String
    blood: Blood
 }

subscription

구독을 통한 실시간 데이터 처리
알람, 채팅등에 유용함

type Subscription{
    personAdded: Person
  }

0개의 댓글