질문이 있습니다. apollo fragment를 사용하고 있는데, 데이터를 뷰에 보여주기 전에 가공하거나 분기하는 로직을 보통 어디에 두시나요?! fragment를 해당 로직을 다루는 곳에서 가지고 있어야할것 같은데… 다들 어떻게 컴포넌트를 나누고 fragment를 정의하시는지 궁금합니다! 선언적으로 data fetching을 하고싶은데, 로직과 fragment정의, view 컴포넌트를 어떻게 나눌지 고민이 됩니다.

로직이라고 표현하신게 정확히 어떤걸지 모르겠습니다. 수도코드라도 적어주시면 더 좋을 것 같아요. 일단 추측성 답변을 드리자면 fragment는 순수하게 UI 에서 그 데이터를 의존하는 모든곳마다 배치합니다. Composition 자체도 의존의 한 종류겠구요

만약에 상위 객체에서 분기가 필요하면 해당 상위 레벨에서 필드를 한번 더 적는 식으로 하는거같아요 ㅎㅎ

fragment CardArticle_article on Article {
  user {
    isUserBlocked
    ...CardArticleProfile_user
  }
}

const Component = () => {
  if (article.user.isBlocked) {
    // 유저가 차단되었다면 카드 자체를 숨기기
    return null
  }
}

fragment CardArticleProfile_user on User {
  nickname
  image {
    url
  }
  isUserBlocked
}

이런 느낌을 질문하신거 맞을지 모르겠네요 ㅎㅎ

맞습니다!! 분기하는 로직은 저런식으로 하는군요!?! 가공 로직이라고 표현한것은 다음과 같이 표현할 수 있을것 같아요.

const Card = () => {
 	// a, b를 가지고 c를 만드는 가공 메서드 <--- 이 로직을 분리하고 싶었어요.
	return (<h1>{c}</h1>)
}

뭔가 순수 UI를 그리는 컴포넌트에는 다 가공된?만들어진 데이터를 넘기고싶었어요. 그 데이터를 만드는 로직은 분리하고 싶었습니다! 그럴때 fragment를 어디에 정의하면 좋을지 고민이 됬습니다😅

사실 로직을 신경쓰지 않는게 진짜 목적입니다 ㅋㅋㅋ;

오!? 그렇군요..!ㅋㅋ 감사합니다

해당 Fragment를 직접 import해서 사용하시나요??

fragment를 모아서 쿼리하는 로직( 또는 container component) 와의 의존성

이건 원래 GraphQL 이랑 상관 없이 존재해요! 컴포넌트를 컴포지션 하는게 곧 컴포넌트 의존성이죠 핵심은 컴포넌트와 데이터 의존성을 함께 배치하고 컴포지션이 항상 같은 위계로 일어나게 하는 점 입니다. 그럼 결과적으로 데이터 의존성은 별도의 처리로직이나 의존성 구조를 가지는 대신 뷰 컴포지션 구조를 따라 자연스럽게 일어나게 돼요

해당 Fragment를 직접 import해서 사용하시나요??

네네.. 지금은 따로 분리해서 관리하고 사용했네요ㅜㅋ