프래그먼트 ( fragment )

Tags
query
설명
쿼리 요청에 사용되는 재사용을 위한 필드셋 구성
프래그먼트fragment 정의 예시fragment 활용 예시반환 결과프래그먼트 안에서 변수 사용하기
 

프래그먼트

똑같은 필드에 대해서 여러번 요청을 한다고 했을 때, 동일한 내용을 여러번 반복해서 적는 것은 비효율적이다.
graphql 쿼리문 요청 시에도 마찬가지다.
따라서 재사용할 요청 필드셋을 프래그먼트라는 것으로 구성해 놓고 사용할 수 있다.

fragment 정의 예시

fragment comparisonFields on Character {
  name
  appearsIn
  friends {
    name
  }
}

fragment 활용 예시

{
  leftComparison: hero(episode: EMPIRE) {
    ...comparisonFields
  }
  rightComparison: hero(episode: JEDI) {
    ...comparisonFields
  }
}

반환 결과

{
  "data": {
    "leftComparison": {
      "name": "Luke Skywalker",
      "appearsIn": [
        "NEWHOPE",
        "EMPIRE",
        "JEDI"
      ],
      "friends": [
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        },
      ]
    },
    "rightComparison": {
      "name": "R2-D2",
      "appearsIn": [
        "NEWHOPE",
        "EMPIRE",
        "JEDI"
      ],
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
      ]
    }
  }
}
 

프래그먼트 안에서 변수 사용하기

  • 쿼리나 뮤테이션에 선언된 변수는 프래그먼트에 접근할 수 있다.
💡
쿼리나 뮤테이션 내에서 변수를 선언하면, 내부에서 호출하는 프래그먼트에서도 이 변수를 참조할 수 있다.
# 쿼리나 뮤테이션 내에서 변수를 선언하면, 내부에서 호출하는 프래그먼트에서도 이 변수를 참조할 수 있다.
query HeroComparison($first: Int = 3) {
  leftComparison: hero(episode: EMPIRE) {
    ...comparisonFields
  }
  rightComparison: hero(episode: JEDI) {
    ...comparisonFields
  }
}

fragment comparisonFields on Character {
  name
  friendsConnection(first: $first) {
    totalCount
    edges {
      node {
        name
      }
    }
  }
}
  • comparisonFields 프래그먼트에서 friendsConnection() 호출을 위해 $first라는 변수를 필요로 한다.
  • HeroComparison에서 comparisonFields 프래그먼트를 호출하는데, HeroComparison 내에서 $first 변수를 선언하면 이것을 프래그먼트에서도 참조하여 사용할 수 있다.