apollo-cache-state

refetch의 문제점과 개선 방법

useQuery()는 수행 후 cache-state에 저장되는데 refetch를 사용하게 되면 새롭게 다시 받아오기때문에 비효율 적인 구조가 되기 때문에 좋은 방법은 아니다

따라서 이제부터는 refetch를 하지 않고 apollo-cache-state를 직접 업데이트하는 방법을 사용할 것이다

그럼 refetchQueries 대체 언제 쓰는걸까?
작은 서비스에서는 오히려 refetchQueries를 쓰는게 좋다.
코드의 가독성 면에 있어서는 refetchQueries가 훨씬 깔끔하고 좋기 때문에 성능을 크게 따질 필요없는 작은 서비스에서는 오히려 refetchQueries를 쓰는게 좋다. 하지만 규모가 커지게 되면 서버의 부하를 초래할 수 있으므로 그때는 cache를 업데이트 하는게 좋다.

cache-state 직접 업데이트해보기

const onClickSubmit = (): void => {
    void 나의함수({
      variables: {
        createBoardInput: {
          writer: "짱구",

          password: "1234",
          title: "제목",
          contents: "내용",
        },
      },
      //   refetchQueries: [{query: FETCH_BOARDS}]
      update(cache, { data }) {
        cache.modify({
          fields: {
            fetchBoards: (prev) => {
              return [data.fetchBoard, ...prev]
            },
          },
        })
      },
    })
  }

캐시를 직접 수정하기 위해서는 update(){} 라는 기능을 이용하게 된다.

update 기능을 사용할때 파라미터로 데리고 온 cache 는 apollo-cache-state에 있는 global state다.

그리고 업데이트 된 결과 는 파리미터의 {data} 에 들어온다.