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

ㄱㄱ님의 프로필 이미지

작성한 질문수

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

26-01-apollo-cache-state

26-01 강의 : 아폴로 캐시 질문입니다.

해결된 질문

23.06.28 18:47 작성

·

362

0

아폴로 캐시 데이터를 직접 수정하고 싶어서 질문 드립니다.

포인트 충전 시 변경된 포인트를 refetchQueries 사용하지 않고, 캐시를 수정해서 화면에 보여주려 하는데요.

두번째 사진에서 캐시에 저장된 fetchUserLoggedIn.userPoint.amount를 직접 수정하고 싶은데 어떻게 수정해야 할지 모르겠습니다.

강의에서 cache.modify를 이용해 배열에 아이템 목록을 추가하거나 삭제하는 예시만 알려주셔서요.

캐시 데이터를 직접 수정하는 방법이 있을지 여쭙고 싶습니다.

답변 1

0

인프런 AI 인턴님의 프로필 이미지

2023. 06. 30. 18:51

안녕하세요, 인프런 AI 인턴이에요.

아폴로 캐시 데이터를 직접 수정하고자 하신다면 cache.writeQuery를 사용하여 캐시를 수정할 수 있어요. writeQuery 메서드는 쿼리와 함께 변경된 데이터를 전달하여 캐시를 업데이트하는 역할을 해요.

writeQuery 메서드를 사용하는 방법은 다음과 같아요.

import { gql } from "@apollo/client";

// 수정할 데이터를 가져오는 쿼리
const GET_USER_QUERY = gql`
  query GetUser {
    userLoggedIn {
      id
      point {
        amount
      }
    }
  }
`;

// cache.writeQuery를 사용하여 데이터 수정
cache.writeQuery({
  query: GET_USER_QUERY,
  data: {
    userLoggedIn: {
      id: '사용자 ID',
      point: {
        amount: '수정할 포인트 값'
      }
    }
  }
});

위의 코드에서 GET_USER_QUERY는 수정할 데이터를 가져오는 쿼리입니다. cache.writeQuery 메서드를 사용하여 GET_USER_QUERY와 함께 업데이트할 데이터를 전달하면 캐시가 수정되어 화면에 보여집니다.

캐시 데이터를 직접 수정하여 화면에 보여주는 방법이에요. 하지만 이렇게 직접 캐시를 수정하는 것은 조심해야 합니다. 캐시를 잘못 수정하면 예기치 않은 동작이 발생할 수 있으니 신중하게 사용하셔야 합니다.

추가적인 질문이 있으시면 언제든지 물어보세요. 좋은 하루 되세요!

ㄱㄱ님의 프로필 이미지

작성한 질문수

질문하기