(출처: https://maggieappleton.com/graphql)

---

GraphQL 구조 🎟

GraphQL Keywords

• Query: 저장된 데이터 가져오기 (REST의 GET과 비슷합니다.)
• Mutation: 저장된 데이터 수정하기
      - Create: 새로운 데이터 생성
      - Update: 기존의 데이터 수정
      - Delete: 기존의 데이터 삭제
• Subscription: 특정 이벤트가 발생 시 서버가 대응하는 데이터를 실시간으로 클라이언트에게 전송

쿼리(query, 데이터 조회)

필드(field)

{
  hero {
    name
  }
}

[코드] hero의 name을 쿼리

{
  "data": {
    "hero": {
      "name": "R2-D2"
    }
  }
}

[코드] 쿼리를 실행했을 때의 결과

• 필드의 name은 String 타입을 반환
• 쿼리와 결과가 정확하게 같은 모양을 하고 있음
• GraphQL은 서버에 요청했을 때 예상했던 대로 돌려받고, 서버는 GraphQL을 통해 클라이언트가 요구하는 필드를 정확히 알기 때문

{
  hero {
    name
    # 이런 식으로 GraphQL 내에서 주석도 작성할 수 있습니다.
    friends {
      name
    }
  }
}

[코드] 히어로의 이름과 히어로의 친구 이름을 같이 쿼리

{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

[코드] 히어로의 이름과 히어로의 친구의 이름이 조회되어 나옴

• 원하는 필드를 중첩하여 쿼리하는 것도 가능
• friends 필드는 배열을 반환
• GraphQL 쿼리는 관련 객체 및 필드를 순회할 수 있기 때문에 고전적인 REST API에서 그러했듯 다양한 endpoint를 만들어 각기 요청을 보내는 대신 클라이언트가 하나의 요청을 보냄으로써 관련 데이터를 가져올 수 있음

전달인자(Arguments)

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

{
  human(id: "1000") {
    name
    height
  }
}

[코드] id가 1000인 human의 name과 height를 쿼리

{
  "data": {
    "human": {
      "name": "Luke Skywalker",
      "height": 1.72
    }
  }
}

[코드] 쿼리 결과

별명(Aliases)

• 필드 이름을 중복해서 사용할 수 없으므로, 필드 이름을 중복으로 사용해서 쿼리를 해야 할 때는 별명을 붙여서 쿼리
• 다른 이름으로 별명을 지정하면 한 번의 요청으로 두 개의 결과를 모두 얻어낼 수 있다.

❌

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

이런 식으로 중복해서 사용할 수 없음

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

앞에 알아볼 수 있는 별명을 붙여서 쿼리

{
  "data": {
    "empireHero": {
      "name": "Luke Skywalker"
    },
    "jediHero": {
      "name": "R2-D2"
    }
  }
}

쿼리 결과

오퍼레이션 네임(Operation name)

여태껏 쿼리와 쿼리 네임을 모두 생략하는 축약형 구문을 사용했습니다만, 실제 앱에서는 코드를 모호하지 않게 작성하는 것이 중요

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

[코드] 이런 식으로 query keyword와 query name을 작성

{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

• 앞의 쿼리는 오퍼레이션 타입
• 오퍼레이션 타입에는 query 뿐만 아니라 mutation, subscription, describes
• 쿼리를 약식으로 작성하지 않는 한 이런 오퍼레이션 타입은 반드시 필요
• 오퍼레이션 네임을 작성할 때는 오퍼레이션 타입에 맞는 이름으로 작성할 것! (가독성)

변수(Variables)

동적으로 인수를 받아 쿼리하는 경우 (대다수)

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

[코드] 변수를 써서 작성된 쿼리

• 오퍼레이션 네임 옆에 변수를 $변수 이름: 타입 형태 로 정의
• $episode: Episode일 때, 뒤에 !가 붙는다면 episode는 반드시 Episode여야 한다는 뜻 (!는 옵셔널한 사항)

뮤테이션(mutation, 데이터 수정)

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

REST API에서 GET 요청을 사용하여 데이터를 수정하지 않고,
POST 혹은 PUT 요청을 사용하는 것처럼 GraphQL도 유사

GraphQL은 mutation이라는 키워드를 사용하여 서버 측 데이터를 수정

스키마/타입(Schema/Type)

GraphQL 스키마의 가장 기본적인 구성 요소는 서비스에서 가져올 수 있는 객체의 종류, 그리고 포함하는 필드를 나타내는 객체 유형

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

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

리졸버(Resolver)

스키마를 정의하면 그 스키마 필드에 사용되는 함수의 실제 행동을 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 () => {
      ...
		}
  }
};