Vue 하다가 React 하는 개발자 이야기 7 - Apollo Client의 Mutation 삭제 문제

Vue 하다가 React 하는 개발자 이야기 7 - Apollo Client의 Mutation 삭제 문제

1. 오랜만에 포스팅을 올립니다. 그간 바쁘기도 하고, 사실 귀찮은 게 많아서 미루고 미루던 포스팅을 이제야 쓰게 됩니다.
2. 오늘은 Apollo Client의 refetch에 대해서 생각해보게 된 이야기를 해보고자 합니다. 위 사진처럼 카테고리 리스트를 만들면서 생기게 된 일입니다.
3. 리스트에 항목이 추가 / 삭제 되는 경우에는 보통 어떻게 처리를 하는지가 궁금해졌습니다. 리스트가 pagination을 하다보니까 mutation에 baseMutationOption을 줄 때 update() 내에서 캐시를 추가하기에는 좀 애매하다는 느낌이 들었기 때문입니다.
4. 위 목록을 보시면, 수정 버튼을 눌러 모달 창을 띄워서 각 항목을 mutation하고, 이 mutation에서 만일 카테고리 타입이 변경되었다면, 위 리스트에도 영향이 가게 될 것입니다. 이를 apollo cache상에서 어떻게 하면 처리할 수 있을까?를 생각해보게 되었는데요. 쿼리가 의존하는 varaibles의 맥락을 공유해야 한다는 점이 마음에 걸렸습니다. mutation 내에서 list를 불러오는 쿼리의 variables 맥락을 알아야 할 이유는 없으니까요. SRP에도 맞지 않고, 매우 나쁜 코딩이 될 것 같았습니다.
5. 사실 가장 쉬운 방법은 refetch를 하거나 페이지네이션 캐시 정책을 cache-and-network로 동기화하여 불러오는 것입니다.
6. 위 사진을 보시면 아시겠지만, 현재 작업중인 프로젝트는 admin 페이지이고 페이지네이션이 매겨져있습니다. 그리고 아무래도 자주 동기화가 이뤄지는 앱이다보니 refetch는 어쩔 수 없는 부분이라는 판단이 들었습니다.
7. 그러나 이 refetch를 줄이기 위해서 고민할 가치는 있습니다. 만일 목록이 infinity scroll 기반의 유저용 앱이라면 아마도 refetch 보다는 다른 설계를 고민하게 되었을것입니다.
8. 그리고 나중에 살펴보니, 이 문제가 굉장히 오래 된 문제라고 하더군요. 국내 GraphQL 커뮤니티에서 이 링크를 통해서 많은 분들이 저와 같은 고민을 하고 계셨다는 사실을 알게되었습니다. 😥 이슈 넘버가 #5번인데, #899번에서 다시 동일한 문제로 언급되는 것을 확인할 수 있습니다. 아주 오래 된 문제이군요.
9. 아무래도 오픈소스이다보니, 사용자들의 지속적인 참여가 많이 필요한 듯 합니다. 저 역시도 기회가 닿는대로 기여할 수 있는 사람이 되면 좋겠습니다. 😃