apollo-cache-state

기존에는 apolloClient에 mutation을 날린 후 에 결과를 refetchQueries를 이용해 api를 새로 요청해 결과를 새로 받아왔다. 성능을 신경쓰지 않아도 되는 작은 규모의 서비스에는 코드 가독성이 좋고 깔끔한 refetchQueries를 쓰는 것이 좋지만 규모가 커지면 서버의 부하를 초래하기 때문에 캐시를 직접 업데이트하는 것이 좋다.

apollo-cache-state

// 데이터 추가 예제코드
const onClickCreate = () => {
  void createBoard({
    variables: {
      createBoardInput: {
        // 추가할 값
      },
    },
    update(cache, { data }) {
    // cache는 apollo-cache-state에 있는 global-state
    // 해당 mutation으로 업데이트 된 결과값이 {data}에 들어옴
      cache.modify({
        fields: { // 어떤 데이터를 수정할 것인지 알려줌
          fetchBoards: (prev) => {
            return [data.createBoard, ...prev];
          },
        },
      });
    },
  });
};

// 데이터 삭제 예제코드
await useDeleteReply({
  variables: { useditemQuestionAnswerId: props.questionAnswerId },
  update(cache, { data }) { 
    cache.modify({
      fields: {
        fetchUseditemQuestionAnswers: (prev, { readField }) => {
          const deleteId = data.deleteUseditemQuestionAnswer;
          const filteredPrev = prev.filter(
            (el) => readField("_id", el) !== deleteId,
          );
          return [...filteredPrev];
        },
      },
    });
  },
});