참조: 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 state값을 관리할 수 있다.
잘 활용하면 apollo client 인터페이스만으로 remote와 local 데이터 모두를 관리할 수 있다.
이밖에도 많은 라이브러리들이 있다는 또 다른 강점이 있다.