GraphQL의 구조

구조

Query

• 데이터 조회(fetch) 역할
• read 수행

// 쿼리 
{
  hero {
    name
    friends {
      name
    }
  }
}

// 결과 
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
      ]
    }
  }
}

🔨 프래그먼트

• 복잡한 데이터 요구사항을 작은 단위로 분할하기 위해 사용하는 재사용 가능한 단위
• 프래그먼트를 이용, 필드셋을 구성해 쿼리에 포함시킬 수 있다.
• 청크가 다른 여러 UI 구성 요소를 하나의 데이터 fetch로 통합할 때 많이 사용!

🛠 지시어

• 쿼리 구조와 형태를 동적으로 변경하기 위해 사용한다.
• 필드나 프래그먼트 안에 삽입될 수 있다.
• 종류
  • @include(if: Boolean) : 인자가 true인 경우에만 결과에 필드 포함
  • @skip(if: Boolean) : 인자가 true인 경우에만 이 필드 건너뜀

Mutation

• 데이터 변조 역할
• create, update, delete 수행
• 쿼리도 데이터를 수정할 수 있지만, 변조 작업은 뮤테이션을 통해 전송되어야 한다는 규칙을 지키는게 좋다!

🎃 다중 필드

• 쿼리 필드는 병렬로 실행되지만, 뮤테이션 필드는 하나씩 차례로 실행된다.

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

// variables
{
  "ep": "JEDI",
  "review": {
    "stars": 5,
    "commentary": "This is a great movie!"
  }
}

// 결과 
{
  "data": {
    "createReview": {
      "stars": 5,
      "commentary": "This is a great movie!"
    }
  }
}