Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Ramda.js
- Node.js
- ECMAScript6
- 프로그래밍
- 프론트엔드
- Programming
- vue.js
- It
- 자바스크립트
- Front-End
- schema-first
- 코딩
- 디자인패턴
- 리액트
- VanillaJS
- 개발
- Design Pattern
- code-first
- React
- 함수형
- apollo client
- goorm.io
- JavaScript
- Funtional programming
- graphql
- VUE
- ELECTRON
- angular
- context api
- react.js
Archives
공부하는 블로그
Vue 하다가 React 하는 개발자 이야기 7 - Apollo Client의 Mutation 삭제 문제 본문
Vue 하다가 React 하는 개발자 이야기 7 - Apollo Client의 Mutation 삭제 문제
- 오랜만에 포스팅을 올립니다. 그간 바쁘기도 하고, 사실 귀찮은 게 많아서 미루고 미루던 포스팅을 이제야 쓰게 됩니다.
- 오늘은 Apollo Client의 refetch에 대해서 생각해보게 된 이야기를 해보고자 합니다. 위 사진처럼 카테고리 리스트를 만들면서 생기게 된 일입니다.
- 리스트에 항목이 추가 / 삭제 되는 경우에는 보통 어떻게 처리를 하는지가 궁금해졌습니다. 리스트가 pagination을 하다보니까 mutation에 baseMutationOption을 줄 때 update() 내에서 캐시를 추가하기에는 좀 애매하다는 느낌이 들었기 때문입니다.
- 위 목록을 보시면, 수정 버튼을 눌러 모달 창을 띄워서 각 항목을 mutation하고, 이 mutation에서 만일 카테고리 타입이 변경되었다면, 위 리스트에도 영향이 가게 될 것입니다. 이를 apollo cache상에서 어떻게 하면 처리할 수 있을까?를 생각해보게 되었는데요. 쿼리가 의존하는 varaibles의 맥락을 공유해야 한다는 점이 마음에 걸렸습니다. mutation 내에서 list를 불러오는 쿼리의 variables 맥락을 알아야 할 이유는 없으니까요. SRP에도 맞지 않고, 매우 나쁜 코딩이 될 것 같았습니다.
- 사실 가장 쉬운 방법은 refetch를 하거나 페이지네이션 캐시 정책을 cache-and-network로 동기화하여 불러오는 것입니다.
- 위 사진을 보시면 아시겠지만, 현재 작업중인 프로젝트는 admin 페이지이고 페이지네이션이 매겨져있습니다. 그리고 아무래도 자주 동기화가 이뤄지는 앱이다보니 refetch는 어쩔 수 없는 부분이라는 판단이 들었습니다.
- 그러나 이 refetch를 줄이기 위해서 고민할 가치는 있습니다. 만일 목록이 infinity scroll 기반의 유저용 앱이라면 아마도 refetch 보다는 다른 설계를 고민하게 되었을것입니다.
- 그리고 나중에 살펴보니, 이 문제가 굉장히 오래 된 문제라고 하더군요. 국내 GraphQL 커뮤니티에서 이 링크를 통해서 많은 분들이 저와 같은 고민을 하고 계셨다는 사실을 알게되었습니다. 😥 이슈 넘버가 #5번인데, #899번에서 다시 동일한 문제로 언급되는 것을 확인할 수 있습니다. 아주 오래 된 문제이군요.
- 아무래도 오픈소스이다보니, 사용자들의 지속적인 참여가 많이 필요한 듯 합니다. 저 역시도 기회가 닿는대로 기여할 수 있는 사람이 되면 좋겠습니다. 😃
'React' 카테고리의 다른 글
React Testing Library 튜토리얼 (0) | 2020.11.01 |
---|---|
Vue 하다가 React 하는 개발자 이야기 6 (0) | 2020.03.09 |
Vue 하다가 React 하는 개발자 이야기 5 (0) | 2020.03.06 |
Vue 하다가 React 하는 개발자 이야기 4 (0) | 2020.03.06 |
Vue 하다가 React 하는 개발자 이야기 3 (2) | 2020.03.05 |
Comments