📚 GraphQL과 Apollo
Chapter 4. GraphQL 클라이언트 만들어보기
Lesson 3. Fragment 사용하기

3. Fragment 사용하기

  • 4-3-fragment 폴더에서 people.js 가져오기

    • components 폴더로 복사

📖 GraphQL의 Fragment

  • 여러 쿼리에 사용될 수 있는, 재사용 가능한 필드셋
  • 중복을 줄임으로써 전체 코드를 간소화

재사용되는 요소들 fragment로 분리

const Names = gql` fragment names on People { first_name last_name } ` const HealthInfo = gql` fragment healthInfo on People { sex blood_type } ` const WorkInfo = gql` fragment workInfo on People { serve_years role team from } `

쿼리들에 적용

const GET_PEOPLE = gql` query GetPeople { people { id ...names ...healthInfo } } ${Names} ${HealthInfo} `; const GET_PERSON = gql` query GetPerson($id: ID!) { person(id: $id) { id ...names ...healthInfo ...workInfo tools { __typename ... on Software { id } ... on Equipment { id count } } } } ${Names} ${HealthInfo} ${WorkInfo} `;


🙂 감사합니다.

📚 GraphQL과 Apollo