Apollo Client:: 캐시된 데이터 다루기

프로젝트 하다가 이미 캐시된 데이터를 가공해야할 필요가 있어서 자료 찾다가 공식 Doc을 읽게 되었다.

(www.apollographql.com/docs/react/caching/cache-interaction/)

 

---

 

서버와 통신하지 않고 Apollo Client cache를 직접 읽고 쓸 수 있는 방법. 이전에 서버에서 불러온 데이터 및 로컬에서만 쓸 수 있는 데이터와 상호작용 한다.

 

readQuery

캐시에서 바로 GraphQL 쿼리를 실행할 수 있는 메소드.

const READ_TODO = gql`
  query ReadTodo($id: ID!) {
    todo(id: $id) {
      id
      text
      completed
    }
  }
`;

// Fetch the cached to-do item with ID 5
const { todo } = client.readQuery({
  query: READ_TODO,
  variables: { // Provide any required variables here
    id: 5,
  },
});

모든 쿼리 필드에 대한 데이터가 캐시에 있다면 readQuery는 쿼리의 형태와 일치하는 객체를 리턴한다.

{
  todo: {
    __typename: 'Todo', // __typename is automatically included
    id: 5,
    text: 'Buy oranges 🍊',
    completed: true
  }
}

- 리턴된 객체를 직접 수정해서는 안 된다. 동일한 객체가 여러 컴포넌트에서 리턴될 수도 있다. 캐시 데이터를 업데이트 하려면 대체할 객체를 만들어서 writeQuery로 넘겨주어야 한다.

- 만일 캐시에 쿼리 필드에 해당하는 데이터가 하나라도 없다면 readQuery는 null을 리턴한다. 서버에서 불러오지 않는다.

- readQuery에 제공하는 쿼리는 GraphQL 서버 schema에 정의되지 않은 필드도 포함할 수 있다. (로컬 전용 필드)