refetch의 문제점과 개선 방법(modify)

현재까지 우리는 refetch 라는 기능을 통해서 손쉽게 화면을 업데이트 했습니다.

하지만 이는 좋은 방법은 아닙니다.

불필요한 네트워크 요청을 백엔드에 한 번 더 보내게 되는 것이죠.

따라서, 추가적인 네트워크 요청 없이 프론트엔드의 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];
            },
          },
        });
      },
    });
  };