fragment

GraphQL을 사용하다 보면 리턴되는 필드가 반복되는 경우가 있다.

addMenu(...) {
  _id
  menuName
  price
}

updateMenu(...) {
   _id
  menuName
  price
}

이런 반복된 타이핑을 줄일 수 있는 것이 바로 fragment 이다.

Usage

fragment menuFields on Menu {
  _id
  menuName
  price
}

fragment 키워드로 fragment임을 선언하고, 이름을 정의한다.
그리고 반드시 참조할 schema를 on something 을 설정해줘야 한다.

이렇게 만들어진 fragment는 사용할 query 문이나 mutation 문에서 자바스크립트의 스프레드 연산자를 사용해 fragment를 사용할 수 있다.

query {
	getMenu {
    	...menuFields
    }
}

Example

const MENU_FIELDS = gql`
	_id
  menuName
  price
`;

const GET_MENU = gql`
	query {
		getMenu {
			${MENU_FIELDS}
		}
	}
`;