Apollo Client 강점

참조: apollo client 공식 문서 (Why Apollo Client?)

캐시 데이터 활용하기 쉬운 구조

const GET_ALL_MEMBERS = gql`
  query GetAllMembers {
    members {
      id
      name
      profileImage
    }
  }
`;

const UPDATE_PROFILE_IMAGE = gql`
  mutation UpdateProfileImage($id: String!, $profileImage: String!) {
    updateProfileImage(id: $id, profileImage: $profileImage) {
      id
      profileImage
    }
  }
`;

멤버 '철수'의 프로필 사진을 업데이트 했다면, 기존에 GetAllMembers의 캐시 데이터에 있는 '철수'의 프로필 사진도 업데이트 되어야 한다.
Apollo Client는 GetAllMembers로 얻은 멤버 데이터들을 각각 __typename과 id값으로 관리하므로, UpdateProfileImage 결과로 변경된 멤버 데이터도 업데이트가 되고 자동적으로 GetAllMembers의 결과인 members에 포함된 철수의 프로필 사진도 업데이트가 된다.

위 캐시 데이터가 있는 상태에서 '철수' 한명의 데이터만 조회하는 경우에는 어떻게 하면 좋을까?

const GET_MEMBER = gql`
	query GetMember {
    	member(id: "cjftn") {
        	id
            name
            profileImage
        }
    }
`;

아래와 같이 FieldPolicy를 설정해주면 서버 호출 없이 cached된 철수의 데이터를 사용할 수 있다.

const cache = new InMemoryCache({
	typePolicies: {
    	Query: {
        	fields: {
            	dog(_, { args, toReference }) {
                	return toReference({
                    	__typename: 'Member',
                        id: args.id
                    });
                }
            }
        }
    }
});

Apollo Client로 local data까지 관리하기

apollo client로 local state값을 관리할 수 있다.

잘 활용하면 apollo client 인터페이스만으로 remote와 local 데이터 모두를 관리할 수 있다.

다양한 라이브러리

• apollo3-cache-persist: 캐시 데이터 영구 저장 라이브러리
• apollo-storybook-decorate: react, vue 같은 프론트엔트 프레임워크가 '컴포넌트 기반'의 ui 구현을 추구하는것은 다들 아시죠? 컴포넌트들을 문서화 하는 것을 도와주는 라이브러리가 storybook이다. 이를 꾸미는 것을 돕는 라이브러리다.

이밖에도 많은 라이브러리들이 있다는 또 다른 강점이 있다.