Apollo Client

Apollo Client

Apollo Client는 GraphQL을 편하게 사용하도록 도와주는 클라이언트 라이브러리이다.

또한 전역 상태 관리 라이브러리의 역할도 한다. 

GraphQl  쿼리를 작성하기만 하면 Apollo Client가 데이터를 요청하고 캐싱하고 UI까지 업데이트해준다.

 

응답의 상태를 추적(load, error, value)

Apollo Client는 로딩, 오류 상태를 추적하여 처음부터 끝까지 요청주기를 포함한다.

이는 내가 프로젝트때 사용했던 리코일의 selector함수를 이용한 비동기처리와 닮아있다.

 

useQuery 훅을 통해 Apollo 앱에서 쿼리를 실행, useQuery에 GraphQL 쿼리 문자열을 전달하여 호출한다.

Apollo

recoil의 useRecoilValueLoadable

캐시를 이용한 네트워크 요청 생략

Apollo Client는 GraphQL을 사용해 서버와 통신을 하며 반환 값을 캐시로 보관하는 상태 관리 라이브러리이다.

(graphQL 서버에 요청시 모든 요청이 post이기 때문에 브라우저 캐시를 사용할 수 없는데, Apollo Client cache를 사용하여 캐시를 사용한다.)

 

아래 그림을 보면 한눈에 봐도 Cache를 이용한 통신을 함을 알 수 있다.

Apollo Client는 한번의 GraphQL 쿼리로 Local State와 서버의 응답을 하나의 결과로 받는다.

그 이후 요청한 쿼리의 필드를 캐싱해 상태를 저장한다. 이렇게 되면 캐시를 이용해 네트워크 요청을 건너 뛸 수 있게 된다.

위의 그림에서 보다시피 Apollo Client는 캐쉬를 통한 상태관리를 하고 있다. 

 

---

참고자료

https://krpeppermint100.medium.com/ts-react-apollo-client%EC%97%90%EC%84%9C-reactive-variables%EB%A1%9C-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0-d204130fea69

https://www.apollographql.com/docs/react/

https://chanyeong.com/blog/post/45

https://velog.io/@zansol/-Apollo-client-cache-wgk3pev5on

https://velog.io/@bangina/Apollo-client-GraphQL-React.js-%EC%9D%98-%EB%AA%A8%EB%93%A0-%EA%B2%83