Apollo Client

Apollo Client 란??

• GraphQL로 로컬 및 원격 데이터를 모두 관리 할 수있는 JavaScript를 위한 포괄적인 상태 관리 라이브러리입니다.
• Apollo Client는 UI를 자동으로 업데이트 하는 동시에 fetch, cache, application data 수정을 할 수 있습니다.

Why Apollo Client ??

Declarative data fetching

• data fetching 대한 Apollo의 declarative approach 방법을 사용하면 데이터 검색, 로딩 및 오류 상태 추적, UI 업데이트를위한 모든 로직이 useQuery Hook에 의해 캡슐화됩니다.
• 이 캡슐화를 통해 쿼리 결과를 presentational components에 쉽게 통합시킬 수 있습니다.

function Feed() {
  const { loading, error, data } = useQuery(GET_DOGS);
  if (error) return <Error />;
  if (loading || !data) return <Fetching />;

  return <DogList dogs={data.dogs} />;
}

• Apollo Client는 로딩및 에러 상태를 추척하며 시작부터 끝까지의 request cycle을 관리합니다.
• 때문에 요청 전에 필요한 미들웨어나 응답 변환 및 캐시에 관해 걱정할 필요가 없습니다.

Zero-config caching

• Apollo Client는 정규화된 캐시가 존재하여 별다른 설정없이 캐시를 사용할 수 있습니다.

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  cache: new InMemoryCache()
});

const GET_ALL_DOGS = gql`
  query GetAllDogs {
    dogs {
      id
      breed
      displayImage
    }
  }
`;

const UPDATE_DISPLAY_IMAGE = gql`
  mutation UpdateDisplayImage($id: String!, $displayImage: String!) {
    updateDisplayImage(id: $id, displayImage: $displayImage) {
      id
      displayImage
    }
  }
`;

• UPDATE_DISPLAY_IMAGE Mutation을 통해 displayImage를 업데이트 하게 되면 새 데이터를 반영하기 위해 모든 목록에 해당 항목도 필요합니다.
• Apollo Client는 __typename, id 속성과 함께 GraphQL 결과값을 각 객체별로 Apolo cache에 저장하기 때문에 ID가 있는 mutation에서 값을 반환하면 동일한 ID로 Object를 가져오는 모든 쿼리들이 자동으로 업데이트 됩니다.

const GET_DOG = gql`
  query GetDog {
    dog(id: "abc") {
      id
      breed
      displayImage
    }
  }
`;

• 만약 사용자가 개들의 목록 중 특정 개의 상세 페이지로 전환하려고 할 때, Apollo Client의 캐시 정책 API는 두 쿼리 사이의 점을 연결할 수 있기 때문에 이미 사용가능한 정보를 다시 가져올 필요가 없습니다.