apollo cache 활용한 RUD 최적화

Graphql을 활용하면 기본적으로 apollo를 활용하게 된다.
apollo를 활용하는 핵심은 cache를 활용하는 최적화이다.
cache를 활용하면 서버에 다시 요청보내지 않아도 사용자에게 최적화된 사용경험을 제공 할 수 있다.

기존 서버를 활용해서 book의 id가 5인 정보를 가져오는 방법과 유사한 상황이다. cache가 없어서 서버에서 정보를 가져오고 있다. cache에 book:5가 저장되었다.

book id 5인 정보가 다시 요청되었을 때 상황이다. 이미 캐쉬 되어있는 내용이 있기에 다시 서버에 요청하지 않아도 된다. (참고한 자료 apollo docs : https://www.apollographql.com/docs/react/caching/overview/)

이 apollo cache는 크게 두가지 장점이 있다. 1. 서버에 요청하고 다시 받는 시간이 없어서 사용자는 바로 정보를 확인 가능하다 2. 서버 리소스를 아낄 수 있다
단점은 apollo cache가 서버에서 가져오는 내용과 동기화되어야 하는데 이 것을 유지하는 게 쉽지만은 않다. 그리고 가장 크리티컬하게도 DOCS가 부실하다.

특히 apollo cache가 강력한 때가 수십개의 데이터와 이미지를 가져왔을 때이다. 이 때 사용자가 원하는 행동은 리스트에 어떤 item을 하나 더 create하는 것이라고 한다면, create한 이후에 리스트 최신화를 위해서 기존엔 refetch를 해서 새로 리스트를 가져와야했다. 하지만 apollo cache를 활용하면 기존에 있던 cached된 리스트에서 하나 추가하면 된다. 코드로 보여주자면

import {useMutation} from "@apollo/client"


const [addComment] = useMutation(AddCommentQuery)

addComment({variable: data}).then( result =>  
  
// console.log 로 result 찍어보면
// result = {
//  __typename: 'Comment',
// id: 'abc123',
// text: 'Great blog post!',
//};

cache.modify({
  id: cache.identify(myPost),
  fields: {
    comments(existingCommentRefs = [], { readField }) {
      const newCommentRef = cache.writeFragment({
        data: newComment,
        fragment: gql`
          fragment NewComment on Comment {
            id
            text
          }
        `
      });

      // Quick safety check - if the new comment is already
      // present in the cache, we don't need to add it again.
      if (existingCommentRefs.some(
        ref => readField('id', ref) === newComment.id
      )) {
        return existingCommentRefs;
      }

      return [...existingCommentRefs, newCommentRef];
    }
  }
}))

위의 코드를 살펴보면 cache.identify로 내가 원하는 comment를 구분한 다음
새로운 comment를 mutation에서 가져온 내용으로 cache ref를 만든다음 (cache.writeFragment 부분) 해당 ref가 기존에 없다고 한다면 기존 ref들에 추가한다음 return 한다.

이런 방식을 활용하면 기존에 post에 있던 comment를 다시 다 받을 필요 없고 내가 추가한 comment만 사용자가 보는 돔에 나타난다. 같은 방식으로 특정한 것만 제거하는 것도 진행하면 된다.

이렇게 List에 추가하거나 제거하는 방법은 어렵지 않다. 그런데 특정 cache내용을 Update하는 방식은 쉽지 않다. 일단 그 캐쉬를 찾아야하고 그것을 modify해야한다. 이 부분은 DOCS도 없다. 이 부분은 연구중이고 다음 블로그에서 자세하게 다루어 보겠다.