[React] GraphQL에서 Fragment 사용하기

안녕하세요. J4J입니다.

 

이번 포스팅은 GraphQL에서 Fragment 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

Fragment란?

 

Fragment는 여러 query에서 사용되는 필드들을 재사용할 수 있도록 도와줍니다.

 

query를 작성하다 보면 중복적으로 사용되는 필드들이 존재하기 마련인데 중복되는 필드들을 각각 다 작성하는 것이 아니라 Fragment를 활용하여 중복을 줄이고 코드를 간결하게 만들어 줄 수 있습니다.

 

Fragment와 관련된 간단한 코드를 작성해보도록 하겠습니다.

 

 

 

Fragment 사용 예시

 

관련된 코드는 이전에 작성한 글을 기반으로 추가 변경해보도록 하겠습니다.

 

또한 해당 글의 스키마는 다음과 같이 구성되어 있습니다.

 

 

반응형

 

 

# This directive allows results to be deferred during execution
directive @defer on FIELD

# Query root
type Query {
  persons: [PersonEntity]
  person(id: Int!): PersonEntity
}

#
type PersonEntity {
  age: Int!
  id: Int!
  name: String
  pets: [PetEntity]
  phone: String
}

#
type PetEntity {
  id: Int!
  name: String
  person_id: Int!
}

# Mutation root
type Mutation {
  deletePerson(person: PersonEntityInput): Boolean!
  savePerson(person: PersonEntityInput): PersonEntity
}

#
input PersonEntityInput {
  name: String
  age: Int!
  id: Int!
  phone: String
  pets: [PetEntityInput]
}

#
input PetEntityInput {
  person_id: Int!
  name: String
  id: Int!
}

 

 

 

위의 링크로 남겨둔 글을 확인해보면 Person값을 가져오기 위한 쿼리로 다음과 같이 구성되어 있습니다.

 

// query
const GET_PERSONS = gql`
    query GetPersons {
        persons {
            id
            name
            phone
        }
    }
`

const GET_PERSON = gql`
    query GetPerson($id: Int!) { 
        person(id: $id) {
            id
            name
            phone
        }
    }
`

 

 

 

id, name, phone 등 중복되어 있는 필드들이 존재하는데 Fragment를 이용하여 다음과 같이 변경해줄 수 있습니다.

 

// fragment
const PersonInfo = gql`
    fragment key on PersonEntity {
        id
    }

    fragment info on PersonEntity {
        name
        phone
    }
`

// query
const GET_PERSONS = gql`
    query GetPersons {
        persons {
            ...key
            ...info
        }
    }
    ${PersonInfo}
`
// PersonInfo는 아래에 있어도 되고

// PersonInfo는 위에 있어도 되고
const GET_PERSON = gql`
    ${PersonInfo}
    query GetPerson($id: Int!) { 
        person(id: $id) {
            ...key
            ...info
        }
    }
`

 

 

728x90

 

 

또한 fragment를 따로 선언하지 않고도 사용할 수 있는데 그럴 경우에는 다음과 같이 코드를 수정해볼 수 있습니다.

 

// query
const GET_PERSONS = gql`
    query GetPersons {
        persons {
            ... on PersonEntity {
                id
            }
            ... on PersonEntity {
                name
                phone
            }
        }
    }
`

const GET_PERSON = gql`
    query GetPerson($id: Int!) { 
        person(id: $id) {
            ... on PersonEntity {
                id
            }
            ... on PersonEntity {
                name
                phone
            }
        }
    }
`

 

 

 

보시면서 눈치채신 분들도 있지만 기본적으로 스키마에 정의되어 있는 값을 기준으로 Fragment를 만들어 줄 수 있습니다.

 

이 말은 즉 스키마에 정의되어 있지 않은 값을 사용하여 Fragment를 만들 수 없다는 뜻으로도 해석되기 때문에 Fragment 또한 다른 것들과 마찬가지로 스키마로 정의된 타입을 이용하여 사용해주시면 됩니다.

 

 

 

 

 

 

 

이상으로 GraphQL에서 Fragment 사용하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.