refetch의 문제점과 개선 방법

프로젝트 하면서 불필요한 네트워크 요청을 하지 않기 위해 refetch보다 cache.modify를 많이 사용했다.

추가적인 네트워크 요청 없이 프론트엔드의 apollo 저장소에 직접 자바스크립트로 CRUD를 하게되면 대규모 환경에서 더 효율적인 서비스를 제공할 수 있기 때문이다.

업데이트 방법은 아래와 같다.

const { data } = useQuery<Pick<IQuery, "fetchBoards">, IQueryFetchBoardsArgs>(
   FETCH_BOARDS
 );

const onClickSubmit = async (data: FormValues) => {
   await createBoard({
     variables: { createBoardInput: { ...data } },
     update(cache, { data }) {
       cache.modify({
         fields: {
           fetchBoards: (prev) => {
             return [data.createBoard, ...prev];
           },
         },
       });
     },
   });
 };

 const onClickDelete = (boardId) => async () => {
   await deleteBoard({
     variables: { boardId },
     update(cache, { data }) {
       const deletedId = data.deleteBoard;
       cache.modify({
         fields: {
           fetchBoards: (prev, { readField }) => {
             const filteredPrev = prev.filter(
               (el) => readField("_id", el) !== deletedId
             );
             return [...filteredPrev];
           },
         },
       });
     },
   });
 };