[GraphQL/Apollo] union

Hyo Kyun Lee·2021년 12월 28일
0

GraphQL/Apollo

목록 보기
7/7

1. 개요

backend API에서 다음과 같은 상황이 있다고 가정한다.

  • frontend에서 useQuery를 활용하여 특정 table data 값을 확보해야 한다.
  • 이를 위해 backend에서 query를 활용하여 특정 table data 값을 얻기 위한 graphql logic을 구성한다.
  • 이때 table data는 반환 형태가 한가지 형태가 아닐 수도 있기 때문에, 두가지 형태(=type, object) 모두 반환 형태로 지정해야 한다.

즉 graphql에서 특정 query의 반환 형태가 한가지 형태(type)이 아닌, 여러 형태가 될 수 있는 경우가 생긴다.

이때 union과 on ... type을 활용하면 마치 if(조건문)와 같은 논리를 graphql에 적용할 수 있다.

2. union

만약 한 회사에서 user_name query를 통해 소속회사정보와 소속동아리정보를 얻어오는 backend API를 작성한다고 해보자.

전체적인 흐름으로 보았을때 user_name이라는 query는 기본적으로 user_name data를 얻어올 수 있지만, 이를 참조키로 활용하여 소속회사정보와 소속동아리정보를 얻어올 수 있다.

이때 참조하는 키는 user_id와 같은 식별자가 될 것이고, 이 참조키를 통해 참조할 수 있는 관련 회사정보와 동아리정보는 각각 하나의 type으로 지칭할 수 있다.

이를 graphql로 작성한다고 하면, user_name이라는 query를 통해 회사정보 type과 동아리정보 type을 모두 받아올 수 있도록 반환형태를 설정해야 하는데, union을 활용하면 두가지 이상의 반환 형태(type)을 지정해줄 수 있다.

export const typeDef = gql`
  union userInformation = userCompany | userTeamActivity

  extend type Query {
    user_name(user_name: String!): userInformation
}

3. ... on type

schema에서 위와 같이 union type을 지정해주었다면, graphql 에서 마치 if와 같이 사용할 수 있다.

이처럼 .. on type을 활용하면, 해당 type에 대하여 반환한 data 값들을 불러올 수 있다.

이는 frontend에서 API를 작성할때 그대로 활용할 수 있다.

export const GET_INFORMATION = gql`
  query user_name(
    $user_name: String!
  ) {
    user_name(
      user_name: $user_name
    ){
      ... on userCompany {
        company_id
      }
      
      ... on userTeamActivity {
      teamactivity_id
      }
    }
  }

여기서 작성한 부분은 graphql에서 작성한 API 구조와 동일하며, 마치 분기처리와 같은 결과값을 얻을 수 있다.

0개의 댓글