GraphQL 서버와 통신하지 않고 Apollo Client 캐시에서 직접 데이터를 읽고 쓰기

 

 

client.writeFragment을 사용해 사용자의 이메일 인증 상태를 즉시 반영 시키기

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

const client = useApolloClient();

client.writeFragment({
  id: `User:${userData.me.id}`,  // 수정할 객체의 ID
  fragment: gql`
    fragment VerifiedUser on User {
      verified
    }
  `,
  data: {
    verified: true  // 캐시에 'verified' 필드를 true로 업데이트
  }
});

 

https://www.apollographql.com/docs/react/caching/cache-interaction/

Reading and writing data to the cache

 

 

useApolloClient

• Apollo 클라이언트 인스턴스를 React 컴포넌트에서 사용할 수 있도록 해주는 Apollo Client의 훅이다.
• 이 훅을 사용하면, Apollo 클라이언트에 접근하여 쿼리나 뮤테이션을 실행할 때 캐시를 조작할 수 있고, 네트워크 요청을 수동으로 트리거할 수 있다.
• 클라이언트의 메서드들을 통해 캐시에 직접 데이터를 읽고 쓸 수 있으며, 필요한 경우 GraphQL 서버와 통신을 제어할 수도 있다.

 

 

client.writeFragment

• Apollo Client에서 캐시에 있는 특정 데이터를 업데이트하는 메서드이다.
• 이 메서드를 사용하면 네트워크 요청 없이 캐시의 일부를 수정할 수 있다.

 

 

사용 시나리오

• 네트워크 요청의 결과로 받은 데이터를 캐시에 저장하거나, UI 변경을 빠르게 반영하고 싶을 때 유용하다.
• 예를 들어, 사용자가 이메일을 인증하면 그 정보를 서버에서 받지 않고 바로 캐시에 업데이트할 수 있다.

 

 

구성 요소

• id
  • 업데이트할 객체의 고유한 ID로, Apollo 캐시는 각 객체를 식별하기 위해 id와 __typename 필드를 사용한다.
  • 여기서는 User 타입의 객체 중 userData.me.id에 해당하는 데이터를 수정하는 것이다.

 

• fragment
  • 수정할 객체의 일부를 나타내는 GraphQL fragment.
  • 여기서는 verified라는 필드를 업데이트하고 있다.

 

• data
  • 캐시에서 업데이트할 데이터를 지정한다.
  • 이 경우 verified: true로 설정하여 사용자의 이메일이 인증되었음을 나타낸다.

 

 

data: { verified: true }로 캐시의 verified 필드를 true로 업데이트하는 이유

• 사용자의 이메일 인증 상태를 즉시 반영하기 위해서이다.
  • 이메일 인증이 완료되면 사용자에게 그 정보를 즉시 반영해야 한다.
  • 서버에서 다시 데이터를 가져오지 않고도, Apollo Client의 캐시를 업데이트하여 사용자 인터페이스(UI)에 바로 반영할 수 있다.
  • 예를 들어, 이메일이 인증되었음을 나타내는 배너나 UI 요소를 즉시 갱신할 수 있다.