Eojin Han

인라인 프래그먼트의 필요성 인터페이스 인터페이스를 구현한 타입 반환 타입을 인터페이스로 명시한 경우 인라인 프래그먼트 사용 유니온 타입 조건부 프래그먼트

인라인 프래그먼트의 필요성

인터페이스


interface Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]!
}

인터페이스를 구현한 타입


type Human implements Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]!
  starships: [Starship]
  totalCredits: Int
}

type Droid implements Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]!
  primaryFunction: String
}

반환 타입을 인터페이스로 명시한 경우

예를 들어 hero 타입이 Character 타입을 반환하는 경우를 가정하고 생각해 보자.

그러면 Character 타입을 구현한 타입들이 반환될 수 있는데, 인터페이스 값 외에 특정 구현체에만 있는 값을 반환하고 싶을 때 Character 타입에 있는 값이 아니므로 반환 가능 여부를 알 수 없으므로 문제가 발생하며, 다음과 같은 오류 메세지를 출력한다.


{
  "errors": [
    {
      "message": "Cannot query field \"primaryFunction\" on type \"Character\". Did you mean to use an inline fragment on \"Droid\"?",
      "locations": [
        {
          "line": 4,
          "column": 5
        }
      ]
    }
  ]
}

인라인 프래그먼트 사용

즉, 인터페이스를 반환 타입으로 명시한 경우 해당 인터페이스를 구현한 타입들도 반환 값이 될 수 있지만, 특정 구현체에만 존재하는 값들도 같이 반환하고 싶은 경우에는 ~~구현체일 경우 ~~값도 같이 반환한다 이렇게 조건을 명시해 줘야 할 것이다.


query HeroForEpisode($ep: Episode!) {
  hero(episode: $ep) {
    name
    ... on Droid {
      primaryFunction
    }
  }
}

Droid라면 primaryFunction 값을 반환한다.

유니온 타입

타입스크립트에서의 유니온과 의미는 동일하다.

💡

주의! : 유니온에는 다른 유니온과 인터페이스 같은 추상 타입은 올 수 없고, 구체적인 객체 타입만 가능


union SearchResult = Human | Droid | Starship

유니온 에시

해석 : SearchResult는 Human, Droid, Starship 중 하나가 될 수 있다.

조건부 프래그먼트

위의 SearchResult 유니온 타입을 반환 값을 처리하려면 각 타입별 경우에 대해서 별도로 명시해줘야 한다.


{
  search(text: "an") {
    ... on Human {
      name
      height
    }
    ... on Droid {
      name
      primaryFunction
    }
    ... on Starship {
      name
      length
    }
  }
}

인라인 프래그먼트와 유니온 타입