GraphQL 과 Apollo를 사용해보며 중간 정리

작성배경

현재 코드스테이츠 LMS 프로젝트를 진행중이다. 이 프로젝트에서 혼자 프론트엔드쪽을 맡고 있다. 써보며 느낀점은 확실히 빌드속도가 빠르다. 아주 얕게 공부하고 바로 손쉽게 프로젝트에 적용할 수 있었다. 처음에 클라이언트에서 쿼리를 날리고 원하는 데이터들만 딱 가져와서 사용할 수 있다는게 너무 신기하고. API 요청을 백엔드 개발자에게 의존해서 프로젝트를 의존적으로 진행할 수 밖에 없는 단점이 해소 된 듯 했다. 아직도 처음 GraphQlApoll 조우했던 그 때의 감동이 생생하고, 지금도 눈가가 촉촉하다. 만세!

좋았던 점

위에서 언급 했듯, 많은 좋은점이 있다. 지극히 주관적으로 느낀점을 정리해보려한다.

  1. Data underfetching, overfetching 문제가 해소된다. 다른 내 글에서 정리 했듯, 이론적으로만 알았던 것을 실제로 경험해보니 신세계 아니, 압구정 신세계 백화점 그 자체다. 그냥 골라서 필요한것만 쇼핑 하듯이 데이터를 골라 쓰면된다!
  2. 백엔드 개발자에게 API 구걸을 매번 조심스럽게 요청하지 않아도 된다. 한번 schemaresolver 를 같이 짜놓으면 이제 마음껏 백엔드 개발자 분들의 감정상태를 파악하는 등의 불필요한 에너지 자원을 소비않고 마음껏 놀아도 된다! 갓래프큐엘 갓폴로 만만세!
  3. Loading, Error, Success 처리가 굉장히 간편해진다. 나는 드디어 리액트와리덕스의 데이터 펫칭에 따른 Loading, Error 예외 처리에서 해방될 수 있었다. 가장 마음에 드는 점이다!
  4. PlayGround 라는 GUI 환경에서 많은 것을 직관적으로 확인할 수 있고, 이것저것 실험 해볼 수 있다. 너무너무 편하다. 아래 그림을 참조바란다.
PlayGround 모습, 자태가 우아하다

어려움을 겪고 있는 점 (진행중…)

역시 빛이 있으면 어둠이 있고, 원빈이 있으면 내가 있듯, 세상은 음과 양으로 이루어져있고, 모든 만물은 일장일단이 있다. 거두절미하고, GraphQl— Apoll 는 처음은 쉽지만, 뒤로갈수록 캐시를 제어하고 nested mutation 에 대한 고민을 해야하는 등등 생경함 아래에서 이것저것 어려움을 겪고 있는게 많았고 지금도 사막에서 오아시스를 찾는 심정으로 헤쳐나가고 있다. 그 모든것들을 한풀이 하듯 정리해보려한다.

  1. 아폴로는 Query를 날려 데이터를 가져와 그려주기전에, Cache를 먼저 확인한다! 즉, Query를 최초에 날리면 데이터를 자동적으로 Cache에 저장하는데 즉 최초로 Query가 실행되었던 이유는 저장된 Cache를 먼저 확인하고 없었기에 그랬던 것이다. 즉 이말은, 추후에 데이터를 업데이트 하는 Mutation을 작동했었다면, 아마 뷰 상에 새로고침을 하지않는 한 절대 반영이 안될것이다. Query를 날려 새로 DB에서 업데이트 된 데이터를 가져와야하는데 Cache에 같은 Query의 이름이 있다보니, 기존에 Cache에 있던 데이터만 가져오게 되는 것이다. 이를 해결하는 방법은, 두가지로 나뉘는 것 같다. 우선 나는 후자를 사용했다. 시간은 부족해 더 쉬운 방법을 찾을 수 밖에 없었기 때문이다.

— Cache update 하기: Cache에 있는 데이터에 직접적으로 Mutation이 끝난 데이터를 추가해 동기화를 시켜준다
 —refetchQueries 사용하기:
Mutation이 끝난 후 다시 쿼리를 불러온다.

Cache update 하기
refetchQueries 사용하기

마치며

그래프큐엘 — 아폴로 조합 정말로 짱짱맨이지만 아직 갈길이 멀다. 캐시관리, 프래그먼트, 컴포즈, 클라이언트 스테이트, 리덕스를 왜 대체하는건지, 이것저것 더 공부할게 많다. 하루빨리 좋은개발자가 되고싶다! 연단에 서서 발표하는 나를 꿈꾸며 오늘도 잠을 청한다. 모두들 행복하시고 좋은일만 있으세요! 굿나잇