Apollo 공식 문서를 그대로 번역한 글 입니다.

Caching in Apollo Client

• apollo client store는 graphQL의 결과를 저장해 두기 때문에 이미 저장된 데이터를 다시 요청할 때에는 즉시 그 결과 값을 응답합니다.

How is data stored

• 아폴로 클라이언트는 InMemoryCache의 Flat Lookup Table로 데이터를 저장합니다.
• 그런데 GraphQL이 응답하는 대부분의 데이터는 Flat 하지 않은 Object 형태인데 이를 어떻게 Flat하게 저장할까요?
• nomalize를 하기 때문에 가능합니다.

{
  "data": {
    "person": {
      "__typename": "Person",
      "id": "cGVvcGxlOjE=",
      "name": "Luke Skywalker",
      "homeworld": {
        "__typename": "Planet",
        "id": "cGxhbmV0czox",
        "name": "Tatooine"
      }
    }
  }
}

Data normalization

1. Identify objects

• 우선 구별가능한 object들을 전부 파악합니다.
• 위의 예에서는 person과 homeworld가 그것.

2. Generate cache IDs

• 각각의 object에 ID 부여하기
• 기본적으로 __typename과 id의 조합으로 이를 만든다.
• Person:cGVvcGxlOjE=, Planet:cGxhbmV0czox 이런 식으로

3. Object는 reference로 치환하기

• 아래 예시를 보면 homeworld가 치환된 것을 확인할 수 있다.
• 만약 다른 쿼리에서 똑같은 homeworld를 저장해야 한다면, 같은 ref를 보기 때문에 데이터 절약!

{
  "__typename": "Person",
  "id": "cGVvcGxlOjE=",
  "name": "Luke Skywalker",
  "homeworld": {
    "__typename": "Planet",
    "id": "cGxhbmV0czox",
    "name": "Tatooine"
  }
}

{
  "__typename": "Person",
  "id": "cGVvcGxlOjE=",
  "name": "Luke Skywalker",
  "homeworld": {
    "__ref": "Planet:cGxhbmV0czox"
  }
}

4. Store normalized objects

• 만약 같은 ID의 캐시가 들어온다면, 이는 기존 캐시에 merge 된다.

Visualizing the cache

• Apollo Client Devtools를 깔아라!