본문 바로가기

# GraphQL/GraphQL.js

타입스크립트 GraphQL Union Type 클래스



GraphQL Union Type


GraphQL Union Type은 여러 오브젝트 타입을 하나의 그룹으로 만든것과 같습니다.

인터페이스interface와 다른점은 각 오브젝트 타입이 전혀 별개라는 점입니다.


인터페이스 타입을 구현한 각각의 오브젝트 타입은 

서로 공통 필드common field를 가지고 있지만,

유니온은 그렇지 않습니다.



먼저 오브젝트 타입부터 만들어볼까요?

type Human {
    givenName: String!
    famillyName: String!
}

type Elf {
    firstName: String!
    middleName: String!
    lastName: String!
}



GraphQL에서 사용하는 스키마 정의 언어schema defined language로

유니온을 표현하려면 아래의 방식을 따릅니다.

union Character = Human | Elf 



유니온 타입을 조회하려면,

인터페이스와 동일하게 인라인 프래그먼트inline fragments를 사용해야 합니다.

query{
    getAllCharacters {
        ... on Human {
            givenName
            famillyName
        }
        ... on Elf {
            firstName
            lastName
            middleName
        }
    }
}





Typescript로 구현하는 Union


예제는 truthly, falsy number 입니다.

숫자 0만 false로 평가되고, 다른 숫자는 true로 평가됩니다.


number 필드에는 평가할 숫자가 들어가야 하고,

result 필드에는 "true" 또는 "false"가 출력되어야 합니다.

const TruthyNumberType = new GraphQLObjectType({
    name: "TruthyNumberType",
    fields: {
        number: { type: GraphQLInt },
        result: {
            type: GraphQLString,
            resolve() {
                return "true";
            }
        },
        x: {
            type: GraphQLString,
            resolve() {
                return "truthy object field";
            }
        }
    },
    isTypeOf: data => data.number
});

const FalsyNumberType = new GraphQLObjectType({
    name: "FalsyNumberType",
    fields: {
        number: { type: GraphQLInt },
        result: {
            type: GraphQLString,
            resolve() {
                return "false";
            }
        },
        y: {
            type: GraphQLString,
            resolve() {
                return "falsy object field";
            }
        }
    },
    isTypeOf: data => !data.number
});



유니온 오브젝트 타입을 생성하고,

구체적인 오브젝트 타입을 결정할 수 있도록 리졸버를 생성하면 끝입니다.

const BinaryNumberUnion = new GraphQLUnionType({
    name: "BinaryNumberUnion",
    types: [TruthyNumberType, FalsyNumberType],
    resolveType: BinaryNumberTypeResolver
});

function BinaryNumberTypeResolver(data: any): GraphQLObjectType {
    return data.number ? TruthyNumberType : FalsyNumberType;
}