GraphQL 구조

 

GraphQL 구조

 

• 서버에서 데이터를 조회하는 경우, REST API의 경우 GET 요청을 했다면, GraphQL에서는 query를 이용해서 원하는 데이터를 요청한다. 
• 데이터를 Create, Update, Delete 와 같이 수정한다면, GraphQL에서는 mutation를 이용한다. 
• 더 나아가 GraphQL에서는 subscription이라는 개념으로 실시간 업데이트를 구현할 수 있다. 

---

✔️ 쿼리 (query) = 데이터 조회하기

✻ 필드

예시1)

👇요청👇

{
	pizza {
    	name
    }
}

👇응답👇

{
  "data" : {
    "pizza":{
      "name" : "bulgogi pizza"
    }
  }
}

GraphQL은 서버에 요청할 때 예상했던 대로 응답받는다. (왜냐면 서버는 GraphQL을 통해 클라이언트가 요구하는 필드를 정확하게 알고 있기 때문이다. )

 

---

예시2)

 

👇요청👇

{
	pizza {
    	name
      topping {
        name
      }
    }
}

👇응답👇

{
  "data" : {
    "pizza":{
      "name" : "bulgogi pizza",
      "topping" : [
        {
          "name" : "cheese"
        },
        {
          "name" : "bacon"
        }
      ]
    }
  }
}

➥ 원하는 필드를 중첩해서 쿼리하는 것도 가능!

---

✻ 전달인자

필드에 인수를 전달하는 부분을 추가히면 쿼리의 필드 및 중첩된 객체들에 전달하여 원하는 데이터만 받아올 수 있다. 

👇요청👇 (id가 5인 학생의 이름과 점수를 쿼리)

{
  student(id: '5'){
    name
    score
  }
}

👇응답👇

{
  'data': {
    'student':{
      'name' : 'Lee',
      'score' : 100
    }
  }
}

(REST API를 이용한다면 ?id=1000 이거나 /1000(/:id)일 때와 같은 목적으로 쿼리)

---

✻ 별명

필드 이름을 중복해서 사용할 수 없으므로, 필드 이름을 중복으로 사용해야할 경우에는 별명을 붙여서 쿼리

 

👇틀린 요청👇

{
  hero(episode:EMPIRE) {
    name
  }
  hero(episode:JEDI) {
    name
  }
}

👇올바른 요청👇 (필드이름 중복되면 별명붙이기!)

{
	empireHero: hero(episode:EMPIRE) {
    name
  }
  jediHero: hero(episode:JEDI) {
    name
  }
}

👇응답👇

{
  'data':{
    'empireHero':{
      'name':'Lee'
    }
    'jediHero':{
      'name':'Sue'
    }
  }
}

---

✻ 오퍼레이션 네임

코드를 모호하지 않게 query keyword, query name 작성하기

 

👇요청👇 / 오퍼레이션 타입은 아래처럼 query도 있고, mutation, subscription, describes 등이 있다. 

query HeroNameAndFriends {
  hero{
    name
    friends {
      name
    }
  }
}

👇응답👇

{
  'data':{
    'hero':{
      'name':'Lee',
      'friends':[
        {'name':'Sue'},
        {'name':'Bae'},
      ]
    }
  }
}

✻ 변수

위의 예시는 고정된 인수를 받는 예제이다. 

동적으로 인수를 받아서 쿼리하려면 변수를 써야한다. 

 

오퍼레이션 네임 옆에 변수를 $변수 이름:타입 형태로 쓰기

만약 $episode: Episode 에서 뒤에 !가 붙으면 episode는 반드시 Episode여야 한다! (! 는 옵셔널!!)

 

👇요청👇

query HeroNameAndFriends($episode: Episode){
  hero(episode: $episode){
    name
    friends {
      name
    }
  }
}

 

 

---

 

✔️ 뮤테이션 (mutation) = 데이터 수정하기

mutation CreateReviewForEpisode($ep: Episode!, #review:ReviewInput!){
  createReview(episode: $ep, review:$review){
    stars
    commentary
  }
}

✔️ 스키마/타입 (Schema/Type)

type Character {
  name: String!
  appearsIn: [Episode!]!
}

• Character는 GraphQL 객체 타입이며, 즉 필드가 있는 타입임을 의미한다. (스키마 대부분의 타입은 객체 타입)
• name 과 appearIn 은 Character 타입의 필드이다. 즉 name 과 appearIn 은 GraphQL 쿼리의 Character 타입 어디서든 사용할 수 있는 필드이다. 
• String은 내장된 스칼라 타입 중 하나이다. 이는 단일 스칼라 객체로 확인되는 유형이며 쿼리에서 하위 선택을 가질 수 없다. 스칼라 타입에는 ID, Int도 있다.
• !가 붙는다면 이 필드는 nullable하지 않고 반드시 값이 들어온다는 의미! 느낌표!를 붙여 쿼리한다면 반드시 값을 받을 수 있을 것이란 예상을 할 수 있다.
• [ ]는 배열을 의미한다. 배열에도 !가 붙을 수 있다. 여기서는 ! 이 뒤에 붙어 있어 null 값을 허용하지 않으므로 항상 0개 이상의 요소를 포함한 배열을 기대할 수 있다.

---

✔️ 리졸버(Resolver)

요청에 대한 응답을 결정해주는 함수이다. 

스키마를 정의하면 그 스키마 필드에 사용되는 함수의 실제 행동을 Resolver에서 정의한다. 

(이런 함수들이 모여있기 때문에 Resolvers라고 함)

 

* GraphQL에서는 데이터를 가져오는 구체적인 과정 (데이터베이스 쿼리, 원격 API 요청)을 직접 구현해야 하는데 이를 Resolver가 담당한다.

 

const db = require("./../db")
const resolvers = {
  Query: { // **Query :** 저장된 데이터 가져오기 (REST 에 GET 과 비슷합니다.)
		getUser: async (_, { email, pw }) => {
			db.findOne({
				where: { email, pw }
			}) ... // 실제 디비에서 데이터를 가져오는 로직을 작성합니다. 
			...
		}
  },
  Mutation: { // **Mutation :** 저장된 데이터 수정하기 ( Create , Update , Delete )
		createUser: async (_, { email, pw, name }) => {
			...
		}
  }
  Subscription: { // **Subscription :** 실시간 업데이트
    newUser: async () => {
      ...
		}
  }
};

 

 

더 공부하기)

https://graphql.org/learn/

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓