Fragment-Driven-Development

• 🙅‍♀️ 프론트엔드의 컴포넌트들의 구조가 아래와 같아지면 안된다.
  • 쿼리를 찔러서 가져온 데이터를, 부모 컴포넌트가 자식컴포넌트들에게 공유한다.
  • 따라서 컴포넌트들 간의 의존성이 발생한다.
  • 만약 기획 변동의 이유로 컴포넌트에서 특정 필드를 사용하지 않게 되어 스키마 변경이 일어나면 그 필드를 사용하는 다른 컴포넌트에서 에러 발생 가능.

const UserProfile = ({post}) => {
	return (<div>
		{post.name}
		{post.address}
		{post.email}
	</div>)
}

// 부모가 페칭할 쿼리

const USERS = gql`
	query usersForUserProfile {
		users(){
			id
			name
			address
			emial
		}
	}
`



• 🙆‍♀️ 화면을 구성하는 컴포넌트 별로, 표현해야 할 데이터 Fragment 가 1:1 로 일치해야한다. (부모한테 내려받기 금지!)
  • 하나의 컴포넌트가 필요한 Fragment 를 props 로 넘겨받는게 아니라, 각 컴포넌트들이 자신만의 Fragment 를 갖는 것이다.
    \

const USER_FILED_FOR_USER_PROFILE = gql`
	fragment userFiledsForUserProfile on User {
		id
		name
		address
		email
	}
`;

const UserProfile = ({post}) => {
	return (<div>
		{post.name}
		{post.address}
		{post.email}
	</div>)
}

// 부모가 페칭할 쿼리

const USERS = gql`
	query usersForUserProfile {
		users(){
			id
			...USER_FILED_FOR_USER_PROFILE
		}
	}
`