cache.modify 와 cache.writeQuery의 차이점과 활용법

그래프큐엘과 아폴로 클라이언트(Apollo Client)를 사용할 때, 캐시 관리는 매우 중요한 부분입니다.

특히, cache.modify와 cache.writeQuery는 아폴로 캐시를 업데이트하는 두 가지 주요 방법입니다.

 

이 두 메서드는 비슷한 목적을 가지지만, 사용 방법과 적용 시나리오에 차이가 있습니다. 아래에서 각각의 메서드와 그 차이점을 예시와 함께 설명하겠습니다.

---

 

cache.modify

cache.modify는 아폴로 캐시에서 특정 필드를 변경할 때 사용됩니다.

이 메서드는 필드 수준에서 캐시를 조작할 수 있는 기능입니다.

 

 

사용 시점

• 캐시된 데이터의 특정 필드만 업데이트할 때
• 여러 쿼리에서 동일한 필드를 공유하고 있을 때
• 부분적인 데이터 갱신이 필요할 때

 

예시

새로운 아이템을 리스트에 추가하는 예제를 보겠습니다.

이 예제에서는 cache.modify를 사용하여 새로운 아이템을 캐시에 추가하고, 기존 리스트에 삽입합니다.

client.mutate({
  mutation: ADD_ITEM,
  variables: { content: 'New item content' },
  update: (cache, { data: { addItem } }) => {
    cache.modify({
      fields: {
        items(existingItemsRefs = [], { readField }) {
          const newItemRef = cache.writeFragment({
            data: addItem,
            fragment: gql`
              fragment NewItem on Item {
                id
                content
              }
            `
          });
          return [newItemRef, ...existingItemsRefs];
        }
      }
    });
  }
});

 

 

 

❗️fragment란?

반복되는 쿼리 부분을 재사용할 수 있도록 하는 기능입니다.
여기서 나오는 fragment부분을 확장성있게 따로 뺀 후 import문으로 가져와서 사용해줄 수 있습니다.

 

 

즉 뮤테이션으로 서버에 요청을하여 데이터를 가져온후, 캐시데이터를 갱신 시켜주는 코드입니다.

 

cache.writeQuery

cache.writeQuery는 아폴로 캐시에서 전체 쿼리 결과를 쓰거나 업데이트할 때 사용됩니다.

특히 이 메서드는 쿼리의 모든 필드를 한 번에 갱신할 때 유용합니다.

 

 

사용 시점

 

• 쿼리 전체 결과를 새로 써야 할 때
• 쿼리 결과가 크게 변경되었을 때
• 데이터 구조가 복잡하지 않고, 전체적인 업데이트가 필요할 때

 

예시

 

새로운 게시물을 추가한 후 전체 게시물 목록을 업데이트하는 예시를 보겠습니다.

client.mutate({
  mutation: ADD_POST,
  variables: { content: 'New post content' },
  update: (cache, { data: { addPost } }) => {
    const existingPosts = cache.readQuery({ query: GET_POSTS });
    cache.writeQuery({
      query: GET_POSTS,
      data: {
        posts: [addPost, ...existingPosts.posts]
      }
    });
  }
});

 

 

위 예시에서는 새로운 게시물을 추가한 후 GET_POSTS 쿼리의 결과를 갱신하기 위해 cache.writeQuery를 사용합니다.

즉 기존의 게시물 목록에 새로 추가된 게시물을 포함시킵니다.

 

차이점

 

구분	cache.modify	cache.writeQuery
수준	필드 수준	쿼리 수준
용도	부분적인 필드 업데이트	쿼리 전체 결과 갱신
적용 시나리오	특정 필드만 변경할 때	전체 쿼리 결과를 재작성할 때

 

결론

캐시 사용법과 차이점에대해서 알아봤습니다.

하지만 무조건적인 캐싱처리가 좋은 방법은 아니라고 합니다.

 

예를들어 카테고리 조회같은 가벼운 요청같은 경우 캐시처리의 번거로움보다는 

그냥 서버에 요청하는 식으로 하는것이 나은 경우가 있기 때문입니다.