4주 프로젝트 회고 - 오해해서 미안해, Apollo client

4주 프로젝트에서는 여러 사람들이 반려동물을 동시에 관리할 수 있는 투두 앱을 만들었다.

 

나는 노령묘 두 마리를 키우고 있는데, 여러 가족 구성원들이 동시에 돌보는 친구들이다 보니 대체 누가 어떤 케어를 해 줬는지 파악하기가 쉽지 않았다. 커뮤니케이션이 어긋나기라도 하면, 약을 중복해서 먹이거나 하는 불상사가 발생할 수도 있었다. 이러한 불편을 해결하고자, 반려 동물 집사들이 모여 투두 앱을 만들게 되었다. (tmi: 4명의 팀원 가운데 한 분을 제외하고 모두 집에 반려동물을 두 마리 이상 키우고 있는.. 엄청난 팀이었다)

 

같은 반려동물 관리 채널에 접속해 있는 유저가 투두 리스트를 수정할 때 화면. apollo gql의 빠릿빠릿한(?) subscription 기능을 확인할 수 있다.

사용한 테크 스택 가운데 메인이었던 것은 GraphQL과 Apollo 조합이었다. GraphQL은 SQL과 같은 쿼리 문법이고, Apollo는 GraphQL 사용을 도와주는 라이브러리다. 

 

프로젝트 초기부터 GQL이라는 쿼리 언어가 가지는 매력은 크게 느낄 수 있었다. Rest API를 사용할 때는 앤드포인트가 마련되어 있지 않으면 원하는 자료에 접근을 할 수 없었다. 또 필요할 때마다 서버분들께 앤드포인트를 열어주실 수 있냐고, 아주 조심스럽게 부탁을 해야 했다. 하지만 그래프큐엘을 쓰면서는, 서버 측에서 데이터에 대한 초기 셋팅만 되어 있다면 제가 제 마음대로 쿼리를 작성해서 원하는 값을 가지고 올 수 있었다. 데이터에의 접근이 훨씬 더 자유로워진 것이다!

 

반면, 프로젝트 중반부가 될 때까지 아폴로 클라이언트의 장점은 솔직히 잘 못 느꼈다. 그저 클라이언트에서 그래프큐엘 쿼리를 쉽게 날릴 수 있게 하는 역할을 하는구나 정도로 이해했다. 여러 레퍼런스에 따르면 apollo client를 사용하면 state의 필요성이 확 줄어든다고 하던데, 프로젝트 중반부까지 나는 잘 공감하지 못했다. 정말 부끄러운 일이지만... 우리 프로젝트에서는 서버에서 받아온 데이터를 글로벌 스토어나 컴포넌트의 스테이트에 저장을 했기 때문이다. 즉, 아폴로를 적용하지 않을 때와 별반 차이 없이 데이터를 다룬 것이다. 

 

무언가 단단히 잘못 이해한 채로 apollo를 사용하고 있었다. GQL 쿼리는 정확히 사용하고 있었기에, data를 서버로부터 가져오는 작업은 잘 되었다. 그러나 문제는 mutation, 즉 데이터를 생성/수정/삭제하고 난 뒤에 변경사항을 다시 랜더링하는 일이었다. 분명히 클라이언트에서는 데이터를 생성했고, 서버와의 통신도 문제가 없었고, 데이터베이스 상에도 새 데이터가 입력된 게 보였는데 클라이언트에서 랜더링이 바로 되질 않는 것이었다! 새로고침을 해야 그제서야 변경사항이 반영이 되었다.

 

문제의 원인은 스토어와 스테이트의 잘못된 사용에 있었다. 데이터베이스는 이미 업데이트 되었고, 서버 또한 업데이트 된 결과를 돌려주고 있는데, 클라이언트의 스토어가 업데이트 되지 않아서 과거의 자료를 랜더링하고 있던 것이었다.

 

우리가 사용했던 react apollo hooks에서는, useQuery, useMutation 등의 hook을 이용해 쿼리를 실행하면 data라는 변수에 결과값을 담아서 돌려 준다. 당연한 이야기지만, data라는 변수에 담긴 데이터는 쿼리를 요청한 해당 컴포넌트 안에서라면 자유롭게 사용이 가능했다. 따라서 굳이 store에 담는 중간 과정 없이, hook이 돌려준 data를 바로 랜더링하면 되는 일이었다! 잘못 이해했던 부분을 깨달은 다음, 아폴로스럽게 리팩토링을 마치고 나니 필요없는 state가 싹 정리되어 코드가 훨씬 깔끔해졌다. 랜더 문제도 해결이 되었고.

 

아폴로의 장점은 그 외에도 많았다. 로딩 상태나 에러를 확인하기도 정말 쉬웠고, 수정한 데이터를 전송하자 마자 다시 get 요청을 보내 업데이트 된 데이터를 받아올 수 있도록 하는 refetchQueries 옵션도 매우 유용했다. 실시간 통신, 즉 subscription 적용도 매우 간편했다.

 

다만 아쉬운 점은 cache를 잘 활용하지 못한 것이었다. 시간이 넉넉지 않았던 탓에 어쩔 수 없었다고 변명해 본다. 대신 다음에도 꼭 GraphQL과 Apollo를 사용하여, 미처 익히지 못한 다른 편리한 기능을 실제 프로젝트에 적용해 볼 수 있으면 좋겠다.