Apollo GraphQL Mutation update

아래 코드는 뮤테이션 옵션 중 하나인 update를 작성한 코드다.

cache.modify 함수는 굉장히 파워풀한 기능을 가지고 있는 함수로 잘 사용하면 UX에 도움이 된다.

문서는 https://www.apollographql.com/docs/react/api/cache/InMemoryCache/#modify

    update(cache, { data }) {
      const id = data?.removeFavoriteItemCategory?.category.id
      cache.modify({
        fields: {
          favoriteItemCategories(existingRefs, { readField }) {
            return existingRefs.filter((commentRef: Reference) => {
              return id !== readField('id', commentRef)
            })
          },
        },
      })
    },

아래도 위와 같은 방식이지만 조회 후 삽입이라는 보다 복잡하고 성능에 아쉬운 코드이므로 위 코드와 같이 modify를 활용하면 좋다.

    update(cache, { data }) {
      const query = FavoriteItemCategoriesDocument
      const id = data?.removeFavoriteItemCategory?.category.id
      const queryResult = cache.readQuery<FavoriteItemCategoriesQuery>({ query })

      if (queryResult) {
        cache.writeQuery({
          query,
          data: {
            favoriteItemCategories: queryResult.favoriteItemCategories?.filter(
              (category) => category.id !== id,
            ),
          },
        })
      }
    },

 

modify 스펙 문서에 보면 id 속성이 required라고 나와 있으나 update 안에서 사용할 때는 필수가 아니며 fields에 집중해야 한다.

아래 이미지 처럼 캐시된 필드명이 나와 있으므로 해당 필드명을 가지는 수정자 함수를 작성하면 된다.

 

만약 어떤 글의 코멘트들을 삭제하고 싶다면 https://www.apollographql.com/docs/react/caching/cache-interaction/#examples 나온 것 처럼 id에 글의 __ref 값을 넣어주고 fields 코멘트 필드명을 가지는 수정자 함수를 작성해서 필터해주면 서버응답보다 빠르게 코멘트를 캐시에서 삭제해 줄 수도 있다.

 

결국 이를 통해서 서버 응답을 기다리지 않고 캐시의 데이터를 원하는데로 수정해서 선반영 해줌으로써 사용자의 경험을 한층 더 향상시킬 수 있다.