[GraphQL] 5. fragment

Fragment

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

 

Usage

- 재사용되는 요소들 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
   }
`;

 

- 쿼리 적용

 

const GET_PEOPLE = gql`
    query GetPeople {
      people {
        id
        ...names
        ...healthInfo
      }
    }
    ${Names}
    ${HealthInfo}
`;

 

writeFragment

- 캐시에 데이터 쓰기
- 캐시된 데이터의 변경 사항은 GraphQL 서버로 푸시되지 않는다.

 

const handleBtnClick = () => {
      cache.writeFragment({
        id: `Movie:${id}`,
        fragment: gql`
          fragment MovieFragment on Movie {
            isLiked
          }
        `,
        data: {
          isLiked: !data.movie.isLiked,
        },
      });
    };

 

 

참고 자료

- GraphQL 공식 문서 / Fragment (링크)

- 노마드코더 [GraphQL로 영화 웹앱 만들기] (링크)

- 얄코 GraphQL 강의 (링크)