[๐Apollo] Cache - Overview
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
- Identify objects
- ์ฐ์ ๊ตฌ๋ณ๊ฐ๋ฅํ object๋ค์ ์ ๋ถ ํ์
ํฉ๋๋ค.
- ์์ ์์์๋ person๊ณผ homeworld๊ฐ ๊ทธ๊ฒ.
- Generate cache IDs
- ๊ฐ๊ฐ์ object์ ID ๋ถ์ฌํ๊ธฐ
- ๊ธฐ๋ณธ์ ์ผ๋ก __typename๊ณผ id์ ์กฐํฉ์ผ๋ก ์ด๋ฅผ ๋ง๋ ๋ค.
Person:cGVvcGxlOjE=
, Planet:cGxhbmV0czox
์ด๋ฐ ์์ผ๋ก
- 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"
}
}
- Store normalized objects
- ๋ง์ฝ ๊ฐ์ ID์ ์บ์๊ฐ ๋ค์ด์จ๋ค๋ฉด, ์ด๋ ๊ธฐ์กด ์บ์์ merge ๋๋ค.
Visualizing the cache
- Apollo Client Devtools๋ฅผ ๊น์๋ผ!
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([๐Apollo] Cache - Overview), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค
https://velog.io/@devgosunman/Apollo-Cache-Overview
์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์
๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
- ์ํด๋ก ํด๋ผ์ด์ธํธ๋ 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
- Identify objects
- ์ฐ์ ๊ตฌ๋ณ๊ฐ๋ฅํ object๋ค์ ์ ๋ถ ํ์
ํฉ๋๋ค.
- ์์ ์์์๋ person๊ณผ homeworld๊ฐ ๊ทธ๊ฒ.
- Generate cache IDs
- ๊ฐ๊ฐ์ object์ ID ๋ถ์ฌํ๊ธฐ
- ๊ธฐ๋ณธ์ ์ผ๋ก __typename๊ณผ id์ ์กฐํฉ์ผ๋ก ์ด๋ฅผ ๋ง๋ ๋ค.
Person:cGVvcGxlOjE=
, Planet:cGxhbmV0czox
์ด๋ฐ ์์ผ๋ก
- 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"
}
}
- Store normalized objects
- ๋ง์ฝ ๊ฐ์ ID์ ์บ์๊ฐ ๋ค์ด์จ๋ค๋ฉด, ์ด๋ ๊ธฐ์กด ์บ์์ merge ๋๋ค.
Visualizing the cache
- Apollo Client Devtools๋ฅผ ๊น์๋ผ!
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([๐Apollo] Cache - Overview), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค
https://velog.io/@devgosunman/Apollo-Cache-Overview
์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์
๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
Person:cGVvcGxlOjE=
, Planet:cGxhbmV0czox
์ด๋ฐ ์์ผ๋ก{
"__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"
}
}
- Apollo Client Devtools๋ฅผ ๊น์๋ผ!
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([๐Apollo] Cache - Overview), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@devgosunman/Apollo-Cache-Overview์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค