https://facebook.com/groups/graphql-kr logo
Join Slack
Powered by
안녕하세요! react로 apollo 를 사용해 개발중인 개발자입니다. redux나 mob...
# 질문
s
안녕하세요! react로 apollo 를 사용해 개발중인 개발자입니다. redux나 mobx없이 상태관리를 위해 cache하나만 사용하는 상태에서, 특정 mutation을 실행한 후에, 새로 생성된 데이터가 바로 반영되게끔 구현하기 위해서 어떤 방법을 사용하는게 좋을까요? 저는 client.restore를 하는 방식으로 사용하는데, 혹시 이 방법이 문제가 되는 경우가 있을까요? 혹시 best practice를 알고 계신 분이 있다면 공유해주시면 정말 감사하겠습니다. 감사합니다😊
h
mutation 의 경우 list addition/deletion 에 대한 커밋(updater)은 따로 구현해줘야 하지만 나머지 경우는 ID 가 잘 있으면 정상적으로 캐시를 업데이트 합니다. 뷰 일관성을 지키려면 업데이트 하고 싶은 정보를 뮤테이션 응답에 정확히 표현하는게 중요한데요. 그 때 component colocation 패턴이 유용합니다.
colocation 이란 컴포넌트와 컴포넌트가 의존하는 데이터 프래그먼트를 같이 배치하는 패턴으로 relay 에서는 fragment container 로 1st party 로 제공하는 패턴입니다.
Copy code
const MyPosts = ({ me, posts }) => React.Element;

fragment MyPosts_me on Query { ... }
fragment MyPosts_posts on User {
  posts {
    # MyPosts 가 의존하는 데이터를 다시 명시
    ...PostCard_post
  }
}
이런식으로 colocation 을 사용하면 컴포넌트와 의존성 데이터의 컴포지션을 항상 일치시킬 수 있어서 “선언적 데이터 패칭” 이 가능합니다.
그러면 나머진 자연스럽게
Copy code
mutation publishPost(...) {
  author {
    ...MyPosts_posts
  }
  post {
    ...PostCard_post
  }
}
요렇게 뮤테이션에 의해 실제로 변경을 전파하고 싶은 구성요소(컴포넌트, 데이터 의존성 모두 표현함)를 선언함으로써 자연스럽게 달성할 수 있습니다.
결론: 프래그먼트 쓰세요
s
자세하고 친절한 설명 감사합니다! 행복합니다👍
h
근데 사실 아폴로가 프래그먼트 처리하는데 버그가 좀 많아서 불행합니다 .... ㅠㅠㅠ
구현 다 갈아엎는다고 패치도 늦ㄱㅎ
t
저는 간단하게 할때는 그냥 refetch하는거 같아요 ㅋㅋ
Open in Slack
PreviousNext
Powered by