본문 바로가기
개발/GraphQL , Apollo

fetchPolicy 와 nextFetchPolicy 공식문서 해석

by 안뇽! 2022. 3. 27.
반응형

fetch policy 세팅

디폴트로 useQuery 훅은 apollo client 캐시를 체크한다. (요청한 데이터가 이미 로컬에서 사용가능한지 아닌지 볼려고)

만약 모든 데이터가 로컬에서 사용가능하면 useQuery 훅은 graphQL서버에 쿼리를 날리지 않는다.

cache-first 정책은 apollo client의 디폴트 fetch policy이다.

fetchPolicy 옵션은 다음과 같이 작성할 수 있다.

const { loading, error, data } = useQuery(GET_DOGS, {
  fetchPolicy: "network-only" // Doesn't check cache before making a network request
});

nextFetchPolicy

위에서 언급한 fetchPolicy 는 쿼리가 첫번째 실행될때 사용되는 옵션이다.

nextFetchPolicy는 쿼리가 이후 캐시 업데이트에서 어떻게 반응할지 정할 때 사용된다.

const { loading, error, data } = useQuery(GET_DOGS, {
  fetchPolicy: "network-only",   // Used for first execution
  nextFetchPolicy: "cache-first" // Used for subsequent executions
});

fetch policies

  • cache-first : 디폴트이다. 캐시에 해당 데이터가 있으면 캐시를 사용하고 없다면 graphQL서버에 요청한후에 데이터를 캐시하고 데이터를 반환한다. 네트워크 요청을 최소화 한다.
  • cache-only : 서버에 쿼리를 보내지 않고 캐시만 사용한다. 만약 캐시에 해당 데이터가 없으면 Error를 뱉는다.
  • cache-and-network : 캐시와 graphQL서버 모두에 대해 전체 쿼리를 실행한다. 서버측 쿼리의 결과로 캐시된 필드가 수정되면 쿼리는 자동 업데이트 된다. 캐시된 데이터를 서버 데이터와 일관되게 유지하며 빠른 응답을 제공한다.
  • network-only : 캐시를 체크하지 않고 graphQL서버에 대해 쿼리를 실행한다. 쿼리의 결과는 캐시에 저장된다. 캐시 데이터가 있더라도 사용하지 않는다.
  • no-cache : network-only와 비슷하다. 다만 쿼리 결과가 캐시에 저장되지 않는다.
  • standby : cache-first와 같은 로직을 사용하지만, 기본 필드 값이 변경되어도 쿼리는 자동 업데이트 하지 않는다. refetch 및 updateQueries를 사용하여 수동 업데이트 할 수 있다.
반응형