Apollo 캐시: 정규화와 업데이트

InMemoryCache는 __typename과 id로 구성된 캐시 키에 따라 각 객체를 저장합니다: User:1, Post:42. 쿼리가 id가 "1"인 User를 반환하면, 서로 다른 쿼리에 몇 번 포함되더라도 이 키 아래에 한 번만 저장됩니다.

이후 동일한 User:1을 가져오는 쿼리는 하나의 캐시 항목에서 읽으므로, 모든 컴포넌트가 동일한 데이터를 확인할 수 있습니다.

뮤테이션이 업데이트된 User:1 객체를 반환하면 Apollo는 이를 User:1 캐시 항목에 기록합니다. User:1을 포함하는 모든 활성 쿼리는 추가 코드 없이 UI에 업데이트된 필드를 자동으로 반영합니다.

이러한 자동 전파는 문서(쿼리 키 기반) 캐시보다 정규화된 캐시가 갖는 가장 큰 장점입니다.

쿼리의 현재 캐시 결과를 읽습니다: cache.readQuery({ query: GET_USERS })는 useQuery가 반환했을 때와 같은 데이터 객체를 반환합니다. 쿼리가 캐시에 없으면 null을 반환합니다.

뮤테이션 업데이트 함수 내부에서 readQuery를 사용하여 수정하기 전에 현재 목록을 읽습니다.

cache.writeQuery({ query: GET_USERS, data: { users: updatedUsers } })는 캐시에 직접 기록하여 GET_USERS를 읽는 모든 컴포넌트에서 다시 렌더링을 발생시킵니다. 네트워크 요청은 발생하지 않습니다.

불변 캐시 업데이트를 구현하려면 readQuery와 writeQuery를 함께 사용합니다. 읽고, 새 배열을 만든 다음, 다시 기록합니다.

cache.modify({ id: cache.identify(user), fields: { name: () => 'New Name' } })는 특정 캐시 엔터티의 필드를 직접 수정합니다. 엔터티의 캐시 ID를 알고 있다면 먼저 쿼리를 읽을 필요가 없습니다.

fields 객체는 필드 이름을 수정자 함수에 매핑하며, 수정자 함수는 현재 값을 받아 새 값을 반환합니다.

update 함수를 useMutation에 전달합니다: useMutation(ADD_POST, { update(cache, { data: { addPost } }) { cache.modify({ id: cache.identify(user), fields: { posts: existingPosts => [...existingPosts, addPost] } }); } }).

이렇게 하면 사용자의 캐시된 게시물 배열에 새 게시물이 추가되고, 사용자의 게시물 목록을 표시하는 모든 컴포넌트가 업데이트됩니다.

cache.evict({ id: 'User:1' })는 캐시에서 User:1 항목을 제거합니다. User:1을 포함하는 활성 쿼리는 해당 엔터티가 빠진 결과로 다시 렌더링됩니다.

항목을 제거한 후에는 cache.gc()를 호출하여 루트 쿼리에서 더 이상 도달할 수 없는 객체를 제거합니다. 이렇게 하면 장시간 실행되는 애플리케이션에서 메모리 누수를 방지할 수 있습니다.

cache.gc()는 모든 활성 쿼리에서 시작해 캐시 그래프를 순회하고 더 이상 도달할 수 없는 엔터티를 제거합니다. 주기적으로 호출하거나 많은 엔터티를 삭제하는 일괄 뮤테이션 후에 호출해도 안전합니다.

활성 useQuery 훅이 참조하는 엔터티는 가비지 컬렉션으로 제거되지 않습니다. 어떤 쿼리 결과에도 더 이상 포함되지 않는 고립된 엔터티만 제거됩니다.

목록 쿼리의 일부로 이미 캐시된 단일 엔터티를 GET_USER로 id를 사용해 쿼리하는 경우, Apollo는 필드 정책을 사용하여 네트워크 왕복 없이 캐시에서 읽을 수 있습니다. 이 정책에는 형식 정책의 keyArgs와 읽기 함수가 포함됩니다.

읽기 함수는 캐시 참조를 반환합니다: return toReference({ __typename: 'User', id: args.id }). 이는 Apollo에 기존 User:id 캐시 항목에서 읽도록 지시합니다.

엔터티가 고유 키로 id가 아닌 다른 필드(예: slug 또는 uuid)를 사용하는 경우, 형식 정책에서 구성합니다: new InMemoryCache({ typePolicies: { Post: { keyFields: ['slug'] } } }).

그러면 Apollo는 id 필드를 요구하는 대신 Post:my-post-slug를 캐시 키로 사용하여 비표준 스키마에서도 정규화를 유지합니다.

useMutation 옵션에 refetchQueries: [{ query: GET_USERS }]를 지정하면 뮤테이션이 완료된 후 네트워크에서 다시 가져옵니다. 더 간단하지만 항상 네트워크 요청을 발생시킵니다.

업데이트 함수는 캐시를 로컬에서 수정하여 네트워크 왕복을 피합니다. 캐시 업데이트 로직을 작성하기에 너무 복잡하거나 서버에서 계산되는 필드로 인해 로컬 캐시 업데이트를 신뢰하기 어려울 때 refetchQueries를 사용합니다.

InMemoryCache는 __typename+id를 기준으로 엔터티를 정규화하여 쿼리 간 자동 업데이트를 가능하게 합니다. cache.readQuery, cache.writeQuery, cache.modify로 캐시를 읽고 기록합니다. cache.evict를 호출한 다음 cache.gc로 엔터티를 제거합니다. id가 아닌 기본 키에는 typePolicies를 사용하여 사용자 지정 키 필드를 구성합니다.

로컬 캐시를 효율적으로 사용하려면 뮤테이션 업데이트 함수를 사용하고, 서버에서 계산되는 필드로 인해 로컬 업데이트를 신뢰하기 어려울 때는 refetchQueries를 사용합니다.