캐시 커스텀 merge function

설명
동일한 데이터임을 확신할 수 없을 때, 캐시를 병합할 수 없는데, 이 때 커스텀 merge 함수를 선언하여 이를 해결할 수 있다.
Tags
cache
nested object 관리 방식 이해커스텀 merge 함수가 필요한 순간예시
 
참고 도큐먼트
 

nested object 관리 방식 이해

자바스크립트에서 오브젝트를 다룰 때 Nested Object의 경우 일반적으로 실제로 객체가 nested 되어있다고 생각하는 사람이 많다. 하지만 사실은 그렇지 않다. 오브젝트들이 개별로 존재하며 오브젝트의 참조가 내부에 담겨서 관리된다는 것을 먼저 이해해야 한다.
 

커스텀 merge 함수가 필요한 순간

참고 도큐먼트의 Defining custom merge functions 문서에 좋은 예시가 있다.
 

예시

 
notion image
기존에는 데이터가 존재하는데, 새로 쿼리한 내용에는 빈 배열을 반환받고 있다.
B2BGroupType.users에 unique한 id 값이 존재하지 않기 때문에 동일한 데이터인지 판단할 수 없고, 따라서 기존에 존재하던 캐시와 합쳐야하는지 최신 버전의 데이터로 덮어써야 하는지 apollo client가 판단하지 못하는 이슈다.
기본적으로 덮어쓰도록 되어 있어서 에러가 발생하는 상황은 아니지만, 동일한 데이터에 대한 내용이고 내용이 합쳐져야 하는 경우에는 별도로 merge function을 작성해서 apollo client가 판단하여 적절하게 캐시를 합쳐줄 수 있도록 구성해주어야 한다.
 
export const createApolloClient = (): ApolloClientType => {
  return new ApolloClient({
    link: ApolloLink.from([errorLink, integratedLink]),
    cache: new InMemoryCache({
      typePolicies: {
        B2BGroupType: {
          fields: {
            users: {
              merge(existing, incoming, { mergeObjects }) {
                if (!existing) {
                  return incoming;
                }

                if (incoming?.length === 0) {
                  return existing;
                }

                return incoming;
              },
            },
          },
        },
      },
    }),
    defaultOptions: {
      mutate: {
        errorPolicy: 'all',
      },
      query: {
        fetchPolicy: 'network-only',
      },
    },
  });
};