[ApolloClient] fetchPolicy

2021. 1. 13. 09:56프로그래밍-Web/Apollo

fetchPolicy는 ApolloClient의 캐싱과 관련된 설정이다.

해당 설정을 통해 client가 캐싱 데이터를 어떻게 활용할지 정할 수 있다.

 

<query와 watchQuery>

 

ApolloClient에서는 query방식과 watchQuery방식을 구분하고 있다.

query는 단순히 READ에 해당하며, 데이터를 가져오기만 한다.

watchQuery는 mutation이 일어날때, 또는 DB상의 update가 일어날때,

데이터를 모니터링 하고 있다가 자동적으로 query를 날려주는 개념이다.

 

mutation의 경우는 변경된 데이터를 가져오기 위해 refectchQuries를 이용하지만

단순 query로 변경된 데이터를 get하려면 watchQuery를 사용해야 한다.

 

 

<fetchPolicy를 통한 캐싱 설정>

 

fetchPolicy를 통해 DB에 접근하기 전에 캐싱된 데이터를 어디까지 어떻게 조회할지 결정할 수 있다.

query마다 policy 설정을 할 수 있지만, 이렇게 apolloClient 객체 생성시 설정하면 편하다.

 

옵션은 다음과 같다

 

- cache-first

 

: 쿼리 사용시 캐시 데이터를 먼저 확인한다.

: 캐시 데이터가 있다면 이를 반환하고 동작이 끝난다.

: 캐시 데이터가 없다면 서버에 요청하고 캐시 데이터를 업데이트 하고 반환한다.

: 자주 바뀌지 않는 데이터에 대해 설정하면 좋다

 

- cache-networt

 

: 쿼리 사용시 캐시 데이터를 먼저 확인한다.

: 캐시데이터가 있다면 이를 반환하지만, 캐시데이터가 있든없든 서버에 데이터를 요청하고 가져온 데이터를 한번 더 반환한다

: 화면의 빠른 응답을 위해 캐시 데이터부터 보여주고, 다시 서버에서 받아온 데이터를 보여주는 경우 사용한다.

 

- network-only

 

: 무조건 서버에 데이터를 요청하여 반환하고 캐시데이터를 업데이트한다

: 캐시데이터를 확인하지 않는다

 

- cahe-only

 

: 캐시데이터를 반환하고 그것이 없다면 에러를 발생시킨다

 

- no-cache

 

: 무조건 서버에 데이터를 요청하여 반환한다

: 캐시를 작동시키지 않는다

 

 

<사용시 주의점>

 

cache를 사용하면 최초의 로딩을 빼고는 data가 null인 경우가 없다

따라서 최초의 요청만 제외하고는 data가 언제나 존재하는 상태라는것을 고려하고 state 및 useEffect를 설정하자