graphql 캐시관련 질문

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

[21-02] 글로벌스테이트(서버데이터 캐시와 update)

해결된 질문

작성

21-02 글로벌 스테이트 (서버데이터 캐시와 update) 강의를 보면서 질문하고싶은게 있습니다.

const UPDATE_BOARD = gql`
  mutation {
    updateBoard(
      boardId: "688354b9e43aaf0029151c96"
      password: "123123"
      updateBoardInput: { title: "제목변경됨", contents: "내용변경됨" }
    ) {
      _id
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const { data } = useQuery(FETCH_BOARDS);
  const [updateBoard] = useMutation(UPDATE_BOARD);

  const onClickMove = () => {
    updateBoard();
  };

  return (
    <div>
      {data?.fetchBoards.map((el) => (
        <div key={el._id}>
          <span>{el.title}</span>
          <span>{el.writer}</span>
        </div>
      ))}
      <button onClick={onClickMove}>수정할래요ss</button>
    </div>
  );
}

이런식으로 updateBoard gql mutation을 날려주는데

수정할래요 button을 여러번 누르면

브라우저 네트워크 탭에는 그 누른횟수대로 요청으 갑니다

그런데 응답의 내용을 보면 id값과 _typename이 동일합니다.

강의에서는 이 id값과 _typename의 조합으로 캐싱이된다고 들었어요.

그러면 저 사진처럼 네트워크탭에 요청은 여러번 간거지만 사실은 캐싱이되고 있기떄문에 api 요청에 대한 비용걱정은 크게 신경쓰지 않아도 되는걸까요?

답변 2

노원두

지식공유자

안녕하세요! 진웅님!

현재, updateBoard의 결과는 cache되고있으나, fetch-policy는 작동하고 있지 않아요!
(다시말해, network 요청은 계속 발생하고 있는 중이며, 비용은 발생하지만 이는 일반적입니다)

전체적인 이해를 위해서는, cache와 fetch-policy에 대한 이해가 필요해요!
1) cache: 내가 받은 데이터 저장해놓기
2) fetch-policy(기본옵션: cache-first): 요청시 cache에 있으면 새로요청하지 말고, 갖다쓰자

위 개념을 바탕으로, Query와 Mutation에서 cache와 fetch-policy의 작동방식에 대해 상세히 알아볼게요!

Query(ex, 조회)
fetchBoard 라는 API를 요청하시면, 결과로 받아온 값의 id, __typename을 기준으로 title, content 등의 데이터를 캐시하게 돼요!
이 과정에서 2번째 동일한 요청을 보내면, fetch-poilcy 정책(cache-first)에 따라서, 캐시된 fetchBoard 요청이 있는지 보고,
i) 있다면 캐시된 결과를 그대로 가져온다는게 장점이에요!(network 탭에서 안나타남, 실제로 요청 안됨)
ii) 없다면 network 요청을 해요!

Mutation(ex, 수정)
mutation에는 fetch-policy가 존재하지 않아요.
따라서, updateBoard라는 API를 요청하실 때마다 network 요청이 들어가게 돼요! (network 탭에서도 나타남, 매번 요청됨)
다만, updateBoard의 결과로 받아온 데이터 역시 마찬가지로 id, __typename 기준으로 title, content 등을 캐시하게 되며, 이 과정에서 기존에 id,__typename이 동일한 값으로 캐시되어있는 데이터가 있다면, 자동으로 찾아서 수정을 해주게 됩니다. (따라서, 게시글 수정 이후에 refetchQuery를 날릴 필요가 없다는게 장점이에요!)

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 서진웅님.

질문 주신 내용은 GraphQL의 캐싱 메커니즘과 관련이 있습니다. GraphQL에서 캐싱은 보통 _id와 __typename을 조합하여 이루어집니다. 이는 데이터의 변경 이력이 없어도 동일한 리퀘스트에 대해 동일한 데이터를 반환하도록 하기 위한 것입니다. 아래 링크들을 통해 캐시와 관련된 구체적인 사례를 확인할 수 있습니다.

GraphQL 기본 캐싱 이해하기
설명: 이 링크에서는 GraphQL의 캐화이트 공간을 이용하여 API 요청 횟수에 따른 비용을 줄이는 방법을 살펴볼 수 있습니다.
GraphQL 캐싱에 대한 고급 적용 사례
설명: 이 사례에서는 GraphQL의 advanced caching을 어떻게 설정하고 적용할 수 있는지, 잘못된 캐싱 설정이 어떤 결과를 초래할 수 있는지를 다룬 문제와 해결방안이 포함되어 있습니다.

캐싱이 잘 설정되었다면, 여러 번의 API 요청을 보내더라도 실제로 서버의 데이터에 많은 변경이 없는 경우에는 데이터가 캐시에서 반환될 가능성이 큽니다. 하지만, 이러한 동작은 캐싱은 어플로 설정에 따라 다르게 작동할 수 있으므로 항상 동일한 결과가 보장되지는 않습니다. 특정 상황에서는 서버와의 실제 요청을 줄이기 위해 캐시를 업데이트하거나 무효화하는 전략을 고려해야 할 수도 있습니다.

추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

graphql 캐시관련 질문