[GraphQL/Apollo] Apollo Cache의 유용성

Hyo Kyun Lee·2021년 8월 26일
0

GraphQL/Apollo

목록 보기
3/7

1. Apollo가 가지는 특징

처음 id를 클릭해서 Detail 화면으로 넘어갈 때 loading이 나타나지만,
뒤로가기를 누른 후 다시 Detail 화면으로 넘어가면 바로 data가 나타난다.

  • 처음 id를 클릭했을 경우엔 loading 화면이 나타난 후, data를 받아오고 화면이 구현된다.

  • 뒤로가기를 하여 다시 같은 id를 클릭하면, loading 화면은 나타나지 않고 바로 data를 받아온다.
  • log를 확인하면 loading 값은 false를 유지하며 data도 그대로 유지된다.

2. Apollo Cache의 유용성

Apollo는 Cache를 사용하기 때문에 사용자가 기다리는 loading을 최소화할 수 있다.

  • Apollo는 한번 받은 data를 Cache에 저장해두기 때문에, data가 그대로 유지되어 증발되지 않는 이상 바로 확보할 수 있다.
  • 즉 다시 axios 요청을 할 필요없이 cache에서 data를 그대로 넘겨주고, 이를 통해 빠르고 효율적으로 데이터를 받아올 수 있다.

※Redux와 같은 method 사용 시 이러한 과정을 직접 구현해야 한다.

3. log를 통해 확인하기

Apollo Client Devtools를 설치해서 log를 통해 Apollo cache 상태 등을 확인할 수 있다.

  • 확장 프로그램을 설치한다.

  • 확장프로그램을 설치한 후 console 항목에서 Apollo가 추가되었는지 확인하고, 실행한다(대부분의 개발자 확장 프로그램은 Chrome에서 실행해야 활성화 됨).

  • Query, cache 등 현재 활성화되거나 기억하고 있는 Apollo 상태를 확인할 수 있다.
  • 백엔드 실무를 하면서 log상태를 폭넓게 확인하고 이를 관리할 수 있는 유용한 장치이다.

0개의 댓글