GraphQL이 뭔가요?

REST API와는 또 다른 정보전달방식 GraphQL!
익혀서 사용해보시면 그 간편함과 매력에 빠져들게 돼죠.

GraphQL이란 무엇이고 어떻게 구현하며, REST API와 비교하여 어떤 장단점이 있는지
🍕집 아저씨와의 대화를 통해 살펴보기로 해요.


🔗 GraphQL 공식 사이트

GraphQL를 소개하고 언어마다의 기본적인 구현방법을 알려주는 사이트입니다.


🔗 GraphQL 한글 사이트

위의 사이트를 한글로 만나보세요! 😍




📓 영상의 GraphQL 요청 예제들

🍕 모든 토핑 요청

요청

{ toppings { cheese, meat, sausage, onion, olive, mushroom, pepper } }

결과

{ “data”: { "toppings”: { “cheese”: “mozarella”, “meat”: “pork”, “sausage”: “pepperoni”, “onion”: “white onion”, “olive”: “black olive”, “mushroom”: “button mushroom”, “pepper”: “bell pepper” } } }

🍕 필요한 토핑만 요청

요청

{ toppings { cheese, meat, sausage } }

결과

{ “data”: { "toppings”: { “cheese”: “mozarella”, “meat”: “pork”, “sausage”: “pepperoni” } } }

🍕 피자 요청

요청

{ pizza (type: "house special") { dough, crust, toppings { cheese, meat, sausage } } }

결과

{ “data”: { "pizza": { “dough”: “tae-kwon dough”, “crust”: “sweet potato”, “toppings”: { “cheese”: “mozzarella”, “meat”: “pork”, “sausage”: “pepperoni” } } } }

🏫 반과 학생들의 모든 정보 요청

요청

{ class(class_idx: 1) { class_idx, room, teacher, students { student_name, grade_korean, grade_english, grade_math, grade_science, guardian_contact, address } } }

결과

{ “data”: { "class": { “class_idx”: “1”, “room”: “201A”, “teacher”: “유의태”, “students”: [ { “student_name”: “강백호”, “grade_korean”: 56, “grade_english”: 38, “grade_math”: 40, “grade_science”: 28, “guardian_contact”: “010-1234-5678”, “address”: “개발동 얄코빌 202호” }, { “student_name”: “채소연”, “grade_korean”: 100, “grade_english”: 98, “grade_math”: 94, “grade_science”: 100, “guardian_contact”: “010-2345-6789”, “address”: “개발동 얄코펠리스 1508호” }, { "student_name": "서태웅", "grade_korean": 60, "grade_english": 45, "grade_math": 58, "grade_science": 43, "guardian_contact": "010-9876-5432", "address": "공대동 코딩빌라 321호\n" } ] } } }

🏫 반 정보 변환 요청

요청

mutation { createClass(input: { room: "301A", teacher: "기파랑" }) { class_idx } }

결과

{ “data”: { "createClass”: { “class_idx”: “4” } } }

🏫 반과 학생들의 필요한 정보만 요청

요청

{ class(class_idx: 1) { teacher, students { student_name, grade_korean, } } }

결과

{ “data”: { "class": { “teacher”: “유의태”, “students”: [ { “student_name”: “강백호”, “grade_korean”: 56 }, { “student_name”: “채소연”, “grade_korean”: 100 }, { “student_name”: “서태웅”, “grade_korean”: 60 } ] } } }

🏫 반 정보 수정 및 삭제 요청

수정 요청

mutation { updateClass(class_idx: 4, input: { room: "301B”, teacher: “원술랑" }) { class_idx } }

삭제 요청

mutation { deleteClass(class_idx: 4) { class_idx } }

🍿 더 자세한 내용은 영상에서 보실 수 있습니다.





관련 태그의 다른 영상들

얄팍한 GraphQL & Apollo 강좌
Apollo와 함께 GraphQL의 사용법을 알아보는 90분 강좌입니다.
# graphql
# apollo
HTTPS가 뭐고 왜 쓰나요?
대칭키와 비대칭키 개념과 함께 HTTPS의 목적과 원리를 간략히 알아봅니다.
# https
# 대칭키
# 비대칭키
# 공개키
# 개인키
# 보안
#
PWA가 뭔가요?
떠오르는 모바일 트렌드! PWA는 뭐고 어떻게 만드는지 알아보기로 해요.
# pwa
# natice-app
# 웹-app
# hybrid-app
# cross-platform
#
# mobile
GrqphQL이 뭔가요?
REST API와는 또 다른 신선함! GraphQL의 매력을 알아볼까요?
# graphql
# rest-api
#
REST API가 뭔가요?
웹 개발자라면 꼭 알아야 할 REST API. 쉽게 설명해드립니다.
# rest-api
# api
#
앵귤러, 리액트, 뷰가 뭔가요?
프론트엔드에도 프레임워크가 있다? SPA를 알아봅니다.
# angular
# react
# vue
# spa
# front-end
#
쿠키, 세션, 캐시가 뭔가요?
어렴풋이 알지만 어떻게 다른지 헛갈리는 세 용어. 확실하게 알아보자구요.
# cookie
# session
# cache
#
왜 익스플로러를 싫어하나요?
웹 개발자들의 철천지 원수 익스플로러! 웹표준을 지키자구요.
# browser
# 웹표준
# cross-browsing
# 익스플로러
#
MVC 웹 프레임워크가 뭔가요?
Model? View? Controller? 코드와 함께 쉽게 알아봅니다.
# mvc
# 동적웹
# framework
# library
#
정적 웹은 뭐도 동적 웹은 뭔가요?
왜 HTML, CSS, JS로는 부족할까요? 정적과 동적 웹의 차이를 알아봅니다.
# 정적웹
# 동적웹
#
HTML, CSS JavaScript가 뭔가요?
웹사이트 개발의 핵심이 되는 삼총사! '갖다놓고 꾸미고 시킨다'를 기억하세요.
# html
# css
# javascript
#
# browser
...