Reuse Cached Data For Rendering
Reusing Cached Data
Relay๋ app์ด ์ฌ์ฉ๋๋ ๋์ ๋ฐ์ํ ์ฌ๋ฌ๋ฒ์ ์ฟผ๋ฆฌ์ ์ํด ๋ฐ์์์ง ๋ฐ์ดํฐ๋ค์ ์ถ์ ์ํค๊ณ ์บ์ฑํด๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ข ์ข ์ฐ๋ฆฌ๋ ๋คํธ์ํฌ๋ฅผ ํตํด ๋ฐ์ดํฐ๋ฅผ ์๋ก ๋ฐ์์ค์ง ์๊ณ ์ด๋ ๊ฒ ์บ์ฑ๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๊ธธ ์ํ ๋๊ฐ ์๋ค.
์๋ ์ํฉ๋ค์ด ์ด๋ ๊ฒ โ์บ์ฑ๋ ๋ฐ์ดํฐโ๋ฅผ ์ด์ฉํ ๋งํ ์์์ด๋ค.
์ฑ ๋ด์ ํญ๋ค ์ฌ์ด๋ฅผ ์ด๋ํ ๋, ๊ทธ๋ฆฌ๊ณ ๊ทธ ํญ๋ค์ ์ด๋ํ ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์์ผ ํ๋ ๊ฒฝ์ฐ์ ์ด๋ฏธ ํ ๋ฒ ๋ฐฉ๋ฌธํ ์ ์ด ์๋ ํญ์ ์บ์ฑ๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ๋ค์ ๋คํธ์ํฌ ์์ฒญ์ด ๋ฐ์ํ์ง ์์.
ํ๋ฒ ํผ๋์ ๋ ๋๋ง๋ ์ ์ด ์๋ ํฌ์คํธ์ ๋ค์ ์ ๊ทผํ๋ ค ํ๋ ๊ฒฝ์ฐ, ํฌ์คํธ์ permalink ํ์ด์ง๋ ์บ์๋์ด์๊ธฐ ๋๋ฌธ์ ์ฆ์ ๋ ๋๋ง ๋จ.
๋ง์ฝ ํฌ์คํธ์ permalink ํ์ด์ง์์ ์ง๊ธ local์์ ๊ฐ๊ณ ์๋ ๊ฒ๋ณด๋ค ๋ ๋ง์ ๋ฐ์ดํฐ๋ฅผ ํ์๋ก ํ๋๋ผ๋, ๋น์ฅ์ ๊ฐ๊ณ ์๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๊ณ ๋ ๋๋ง์ block์ํค์ง ์์.
Fetch Policies
์บ์๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ loadQuery
ํจ์ ๋ด๋ถ์ fetchPolicy
์ต์
์ ์ถ๊ฐํ๋ ๊ฒ์ด๋ค. (์ด loadQuery
ํจ์๋ useQueryLoader
ํ
์ ์ํด ๋ฐํ๋ ํจ์๋ฅผ ์๋ฏธ)
const React = require('React');
const {graphql} = require('react-relay');
function AppTabs() {
const [
queryRef,
loadQuery,
] = useQueryLoader<HomeTabQueryType>(HomeTabQuery);
const onSelectHomeTab = () => {
loadQuery({id: '4'}, {fetchPolicy: 'store-or-network'});
}
// ...
}
useQueryLoader
ํ ์ ์ํด ๋ฐํ๋loadQuery
ํจ์๋ฅผ ํธ์ถํ ๋ ์ต์ ์ผ๋กfetchPolicy
๋ฅผ ์ถ๊ฐํ๋ค.store-or-network
์ต์ ์ ์คฌ๊ธฐ ๋๋ฌธ์ ๋จผ์ ์บ์ ๋ฐ์ดํฐ๋ฅผ ํ์ธํ๊ณ , ๋ฐ์ดํฐ๊ฐ ์๋ ๊ฒฝ์ฐ์๋ง ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ fetchํ๋๋ก ํ๋ค.fetchPolicy
๋ ๋ค์ ๋ด์ฉ๋ค์ ๊ฒฐ์ ํ๋ค.๋ก์ปฌ ์บ์์์ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ ์ง
store(์บ์)์ ์๋ ๋ฐ์ดํฐ์ ๊ฐ์ฉ ์ฌ๋ถ์ ๋ฐ๋ผ ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ fetchํ ์ง
๊ธฐ๋ณธ์ ์ผ๋ก, Relay๋ ๋ก์ปฌ ์บ์์ ์๋ ์ฟผ๋ฆฌ๋ฅผ ์ฝ์ด ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ค ํ๋ค. ํ์ง๋ง ๊ทธ ์ฟผ๋ฆฌ์ ๋ํ ๋ฐ์ดํฐ๊ฐ ์๊ฑฐ๋ ์
๋ฐ์ดํธ๊ฐ ํ์ํ ๊ฒฝ์ฐ์๋ ์ฟผ๋ฆฌ๋ฅผ ํตํด ๋คํธ์ํฌ ์์ฒญ์ ๋ณด๋ด ์ ์ฒด ๋ฐ์ดํฐ๋ฅผ ๋ค์ ๊ฐ์ ธ์จ๋ค. ์์ ์๋ store-or-network
์ต์
์ ์ฌ์ค Relay์ ๊ธฐ๋ณธ ์ต์
์ด๋ค.
์๋์ ๊ฐ์ ๋ค๋ฅธ ์ต์ ๋ค๋ ์๋ค.
store-and-network
: ๋ก์ปฌ ์บ์์ ๋ฐ์ดํฐ๋ฅผ ์ผ๋จ ์ฐ์ง๋ง, ํญ์ ๋คํธ์ํฌ ์์ฒญ์ ๋ค์ ๋ณด๋. ๋ฐ์ดํฐ๊ฐ ์๋ ์๋ , ์ต์ ์ ๊ฒ์ด๋ ์๋๋ ์๊ด ์์.network-only
: ๋ก์ปฌ ์บ์์ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ํญ์ ๋คํธ์ํฌ ์์ฒญ์ ํตํด ์๋ก ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ด์ฉ.store-only
: ์ค์ง ๋ก์ปฌ ์บ์์ ๋ฐ์ดํฐ๋ง ์ฌ์ฌ์ฉํจ. ๋คํธ์ํฌ ์์ฒญ์ ๋ณด๋ด์ง ์์. ์ด ๋๋ฌธ์ ๋ฐ์ดํฐ ์ผ๊ด์ฑ์ ๋ํ ์ฑ ์์ ๊ฐ๋ฐ์์๊ฒ ์์.
Availability of Data
Relay๋ ๋ฐ์ดํฐ๊ฐ โ๊ฐ์ฉํ์งโ์ ๋ํด ๋๊ฐ์ง ์ฒ๋๋ฅผ ํตํด ํ๋จํ๋ค.
Presence of Data
Staleness of Data
Presence of Data
Relay store์ ์๋ ๋ฐ์ดํฐ๋ ์๋ช ์ด ์๋๋ฐ, ์ด ์๋ช ์ ๋ฐ์ดํฐ๊ฐ ๊ฐ์ฉํ์ง๋ฅผ ํ๋จํ ์ ์๋ ์ค์ํ ์ฒ๋์ด๋ค. ๋ณดํต Relay store ์์ ์๋ ๋ฐ์ดํฐ๋ ์ฒซ fetch ์ดํ ๊ณ์ ์กด์ฌํ๋ค. ๋ง์ฝ ํ๋ฒ๋ fetchํ ์ ์ด ์๋ ๋ฐ์ดํฐ๋ผ๋ฉด store์๋ ์กด์ฌํ์ง ์์ ๊ฒ์ด๋ค.
๊ทธ์น๋ง ์๋ง์ ์ฟผ๋ฆฌ๋ค์ ํตํด ๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ค์ ์ ๋ถ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํด๋ ์๋ ์๋ค. ์ ๋ถ ์ ์ฅํด๋๋ค๋ฉด ์ฐ๋ฆฌ๋ ๋ถํ์ํ๊ฒ ๋ฐฉ๋ํ๊ณ ๋ก์ ๋ฐ์ดํฐ๋ฅผ ์ํด ๋ง์ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ๋ญ๋นํ๊ฒ ๋ ๊ฒ์ด๋ค.
์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด Relay๋ Garbage Collector๋ผ๊ณ ํ๋ ํ๋ก์ธ์ค๋ฅผ ๋๋ฆฐ๋ค. ๊ทธ๋ฌ๋ฉด ๋ ์ด์ ์ฐ์ง ์๋ ๋ฐ์ดํฐ๋ค์ ์ญ์ ํ ์ ์๊ฒ ๋๋ค.
Garbage Collection in Relay
Relay๋ ํนํ ๋ก์ปฌ in-memory store์์ Garbage Collection์ ์ํํ๋ค. ์ด๋ค ์ปดํฌ๋ํธ์๊ฒ๋ ์ฐธ์กฐ๋์ง ์๋ ๋ฐ์ดํฐ๋ค์ ์ญ์ ํ๋ค.
๊ทธ์น๋ง ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฌ์ฉํ ๊ฐ๋ฅ์ฑ๋ ์ผ๋์ ๋ฌ์ผ ํ๋ค. ๋ง์ฝ ๋ฐ์ดํฐ๊ฐ ๋๋ฌด ๋นจ๋ฆฌ ์ญ์ ๋ผ์ ์ฌ์ฌ์ฉํ๋ ค๊ณ ๋ณด๋ ์๋ ๊ฒฝ์ฐ์ ๋คํธ์ํฌ๋ก๋ถํฐ ๋ค์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์์ผ ํ๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก ์ฌ์ฌ์ฉํ ์ ์๊ฒ ๋๋ค. ๊ทธ๋์ ์ฌ์ฌ์ฉ์ด ์ผ์ด๋ ๋ฐ์ดํฐ๋ค์ ํ์คํ๊ฒ โ์ฌ์ฌ์ฉ ํ ๊ฑฐ๋คโ๋ผ๊ณ ๋งํด์ฃผ๋ ์์ ์ด ํ์ํ๋ค.
Query Retention
์ฟผ๋ฆฌ๋ฅผ ์ ์งํ๋ค๋ ๊ฒ์ Relay์๊ฒ ์ฟผ๋ฆฌ์ ์ฟผ๋ฆฌ์ ๊ด๋ จ๋ ๋ฐ์ดํฐ๋ฅผ ์ง์ฐ์ง ๋ง์๋ฌ๋ผ๊ณ ์๊ธฐํ๋๊ฒ๊ณผ ๊ฐ๋ค. ํ๋ ์ด์์ caller๊ฐ ์๋ค๋ฉด ์ฟผ๋ฆฌ๋ store์์ ์ง์์ง์ง ์๊ฒ ๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก, ์ฟผ๋ฆฌ ์ปดํฌ๋ํธ๋ useQueryLoader
๋ usePreloadQuery
, ํน์ ๋ค๋ฅธ API๋ฅผ ์ฌ์ฉํ๋ค. ์ฟผ๋ฆฌ ์ปดํฌ๋ํธ๋ mount ๋ ์ดํ ์ฟผ๋ฆฌ๋ฅผ ์ ์งํ๊ณ , unmount ๋ ์ดํ ์ฟผ๋ฆฌ๋ฅผ ๋์์ค๋ค. ์ฆ unmount ์ดํ์๋ ์ธ์ ๋ผ๋ store์์ ์ฟผ๋ฆฌ์ ์ฟผ๋ฆฌ ๊ด๋ จ ๋ฐ์ดํฐ๋ค์ด ์ญ์ ๋ ์ ์๋ค.
๋ง์ฝ ์ปดํฌ๋ํธ ์๋ช
์ฃผ๊ธฐ์ ๊ด๊ณ ์์ด ์ฟผ๋ฆฌ๋ฅผ ์ ์งํ๊ณ ์ถ๋ค๋ฉด, retain
๋ฉ์๋๋ฅผ ์ด์ฉํ๋ฉด ๋๋ค.
// Retain query; this will prevent the data for this query and
// variables from being garbage collected by Relay
const disposable = environment.retain(queryDescriptor);
// Disposing of the disposable will release the data for this query
// and variables, meaning that it can be deleted at any moment
// by Relay's garbage collection if it hasn't been retained elsewhere
disposable.dispose();
retain
๋ฉ์๋๋ฅผ ํตํด ์ฟผ๋ฆฌ ์ปดํฌ๋ํธ์ ์๋ช ์ฃผ๊ธฐ์๋ ์๊ด ์์ด ์ฟผ๋ฆฌ๋ฅผ ์ ์งํ ์ ์๋ค. ๊ทธ๋ฌ๋ฉด ์ดํ์ ๋ค๋ฅธ ์ปดํฌ๋ํธ๊ฐ ์ฌ์ฌ์ฉํ๊ฑฐ๋, ์ง๊ธ์ ์์ง๋ง ๋์ค์ ์๊ธธ ๊ฐ์ ์ปดํฌ๋ํธ์ ๋ค๋ฅธ ์ธ์คํด์ค๊ฐ ์ฌ์ฌ์ฉํ ์๋ ์๋ค.dispose
๋ฉ์๋๋ retain ๋ฉ์๋์ ๋ฐ๋๋ก ์๋ํ๋ค. ์ธ์ ๋ ์ง garbage collection๊ฐ ์ฟผ๋ฆฌ๋ฅผ ์์จ ์ ์๋ค.
Controlling Relayโs Garbage Collection Policy
ํ์ฌ Garbage Collection์ ์ปจํธ๋กค ํ ์ ์๋ ์ต์ ์ด ๋๊ฐ์ง ์ ๋ ์๋ค.
GC Scheduler
gcScheduler
๋ผ๋ ํจ์๋ฅผ Relay Store์ ๋ถ์ฌ์ Garbage Collection์ ์ค์ผ์ค๋ง ํ ์ ์๋ค.// Sample scheduler function // Accepts a callback and schedules it to run at some future time. function gcScheduler(run: () => void) { resolveImmediate(run); } const store = new Store(source, {gcScheduler});
์๋๋ ์ Store๋ฅผ ์์ฑํ ๋
gcScheduler
๋ฅผ ๊ฐ์ด ์ฃผ์ง ์๋๋ค. ๊ทธ๋์ Relay๋resolveImmediate()
ํจ์๋ฅผ ํตํด garbage collection์ ์ํ.resolveImmediate๋ ์ฐธ์กฐ๊ฐ ๋์ด์ก์ ๋ ๋ฐ๋ก garbage collection์ด ์ํ๋๋๋ก ํ๋ ์ ์ฑ .
๊ทธ๋์ ์ผ๋จ ์ ์ฝ๋๋ ์ฌ์ค์
gcScheduler
์ต์ ์ ์ฃผ์ง ์์๊ฒ๊ณผ ๊ฐ์.
scheduler function์ ํตํด garbage collection์ด ๊ธฐ๋ณธ ์ต์ ๋ณด๋ค ๋ ๊ณต๊ฒฉ์ ์ผ๋ก ์ํ๋๋๋ก ์์ฑํ ์๋ ์์. ์๊ฐ์ด๋ scheduler ์์ฑ์ด๋ ๊ทธ ์ธ์ ๋ค๋ฅธ ํด๋ฆฌ์คํฑ๋ค์ ์ด์ฉํ๋ฉด ๋จ.
ํจ์์ ๊ตฌํ๋ถ์์
run
์ฝ๋ฐฑ์ ์ฆ์ ์คํํ๋ฉด ์๋จ.
Garbage Collector Buffer Size
Relay Store๋ ๋ด๋ถ์ ์ผ๋ก release buffer๋ฅผ ๊ฐ๊ณ ์๋ค. ์ฟผ๋ฆฌ ์ ์ง๋์ ์๊ด ์์ด ๋ช ๊ฐ์ ์ฟผ๋ฆฌ๋ฅผ ์์๋ก ์ ์ฅํ๋ค. (๋ช ๊ฐ์ ์ฟผ๋ฆฌ๋ฅผ ์ ์ฅํ ์ง๋ ์กฐ์ ์ด ๊ฐ๋ฅ) ์ฟผ๋ฆฌ๋ฅผ ์๋ ์์ ํ๋ ์ฟผ๋ฆฌ ์ปดํฌ๋ํธ๊ฐ unmount ๋๋ ๋ฑ์ ์ด์ ๋ก ์ฟผ๋ฆฌ๊ฐ ์์ด์ง๋๋ผ๋ ์ผ๋จ์ release buffer์ ๋จ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ด์ ํ์ด์ง๋ก ๋์๊ฐ๊ฑฐ๋ ์ด์ ํญ์ผ๋ก ๋์๊ฐ ๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฌ์ฉํ ์ ์๋ค.
Relay Store์ gcReleaseBufferSize
์ต์
์ ์ฃผ๋ฉด release buffer์ ์ฌ์ด์ฆ๋ฅผ ์กฐ์ ํ ์ ์๋ค.
const store = new Store(source, { gcReleaseBufferSize: 10 });
์ ์ฝ๋๋ ReleaseBuffer์ ํฌ๊ธฐ๋ฅผ 10์ผ๋ก ํ๊ฒ ๋ค๋ ๋ป. ๊ธฐ๋ณธ๊ฐ์ด 10์ด๊ธฐ ๋๋ฌธ์ ์ฌ๊ธฐ์๋ ์ฌ์ค์ ๋ฒํผ ํฌ๊ธฐ๋ฅผ ๋ฐ๊พธ์ง ์์์.
๋ฒํผ ํฌ๊ธฐ๋ฅผ 0์ผ๋ก ํ๋ฉด release buffer๋ฅผ ์์ฐ๊ฒ ๋ค๋ ๋ป๊ณผ ๊ฐ์. ์ฟผ๋ฆฌ๋ค์ ์ฆ์ release ๋๊ณ ์ฌ์ฌ์ฉ๋ ์ ์์ ๊ฒ.
Staleness of Data
๊ธฐ๋ณธ์ ์ผ๋ก, Relay๋ store์ ์๋ ๋ฐ์ดํฐ๊ฐ ๋ก์์ ๊ฒ์ด๋ผ๋ ๊ฐ์ ์ ํ์ง ์๋๋ค. ๋ฐ์ดํฐ ๋ฌดํจํ API๋ฅผ ํตํด ๋ช ์์ ์ผ๋ก ๋งํนํด์ฃผ๊ฑฐ๋ ์ฟผ๋ฆฌ ์บ์ ๋ง๋ฃ ์๊ฐ๋ณด๋ค ์ค๋ ์ง๋ ๊ฒฝ์ฐ๊ฐ ์๋๋ผ๋ฉด Relay๋ ๋ฐ์ดํฐ๋ฅผ ๋ก์๋ค๊ณ ์๊ฐํ์ง ์์ ๊ฒ์ด๋ค.
๋ฐ์ดํฐ๊ฐ ๋ก์๋ค๋๊ฑธ ํ์คํ ์ ๋๋ ๋งํน์ ํด์ฃผ๋๊ฒ ์ข๋ค. ๋ ์ด์์ mutation์ด ์ผ์ด๋์ง ์์์ ๋ณด์ฅํ ์ ์์ ๋๊ฐ ๊ทธ๋ ๋ค.
Relay๋ ์๋์ ๊ฐ์ API๋ค์ ์ ๊ณตํ๊ณ ์ด๊ฑธ ์ด์ฉํด store์ ์๋ ๋ฐ์ดํฐ๊ฐ ๋ก์์์ ํ์ํ ์ ์๋ค.
Globally Invalidating the Relay Store
์กฐ๊ธ ๊ณผ๊ฒฉํ ๋ฐฉ๋ฒ์ store์ ์๋ ๋ชจ๋ ์ฟผ๋ฆฌ ์บ์๋ฅผ ๋ฌดํจํํ๋ ๊ฒ์ด๋ค. ์ด๋ ๊ฒ ์ ๋ถ๋ฅผ ๋ฌดํจํํ๋ฉด Relay๋ ํ์ฌ ์บ์ฑ๋ ๋ฐ์ดํฐ๋ค์ ์ ๋ถ ๋ก์๋ค๊ณ ์ธ์ํ๊ฒ ๋๋ค.
function updater(store) {
store.invalidateStore();
}
์ด๋ ๊ฒ invalidateStore()
๋ฉ์๋๋ฅผ ํตํด ์ ์ฒด store์ ๋ฐ์ดํฐ๋ฅผ ๋ฌดํจํ ํ ์ ์๋ค.
๋ฌดํจํ๋ ๋ฐ์ดํฐ๋ค์ ๋ค์์ ์ ๊ทผํด ํ๊ฐํ๋ ค ํ ๋ ๋คํธ์ํฌ๋ก๋ถํฐ refetch.
updater ํจ์๋ mutation, subscription, ํน์ ๋ก์ปฌ store๋ฅผ ์ ๋ฐ์ดํธํ๋ ๋ก์ง์ ์ผ๋ถ๋ก ์ฌ์ฉํ ์ ์์.
Invalidating Specific Data In The Store
์กฐ๊ธ ๋ ๊ตฌ์ฒด์ ์ผ๋ก, ์ด๋ค ๋ฐ์ดํฐ๋ฅผ ๋ฌดํจํ ํ๊ฑฐ๋ ํน์ store์ ์๋ ์ด๋ค ํน์ ํ ๋ ์ฝ๋๋ง ๋ฌดํจํ ํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋ค. ๋ฐ๋ก ์์ global invalidating์ฒ๋ผ store ์ ๋ถ๋ฅผ ๋ฌดํจํํ์ง ์๊ณ ์ง์ ๋ ์ฟผ๋ฆฌ๋ค๋ง ๋ฌดํจํ๋๋ค.
function updater(store) {
const user = store.get('<id>');
if(user != null) {
user.invalidateRecord();
}
}
invalidateRecord()
๋ฉ์๋๋ฅผ ์ฌ์ฉ. invalidateStore๊ณผ๋ ๋ค๋ฅด๊ฒ store์ ์ผ๋ถ ๋ฐ์ดํฐ(user
)๋ง ๋ฌดํจํ. ์ด๋ ๊ฒ ๋๋ฉดuser
๋ ์ฝ๋๋ ๋ก์๋ค๊ณ ๋งํน๋์ด ๋ค์์ ์ ๊ทผํด ํ๊ฐํ๋ ค ํ ๋๋ ๋คํธ์ํฌ๋ก๋ถํฐ refetch ๋ ๊ฒ.๋ง์ฐฌ๊ฐ์ง๋ก updater ํจ์๋ mutation, subscription, ํน์ ๋ก์ปฌ store๋ฅผ ์ ๋ฐ์ดํธํ๋ ๋ก์ง์ ์ผ๋ถ๋ก ์ฌ์ฉํ ์ ์์.
Subscribing to Data Invalidation
์์์ โ๋งํนํ๋คโ๋ ํํ์ ์ฌ์ฉํ๋๋ฐ, ๋งํน์ ํ๋ฉด ๋ค์ ํ๊ฐ ์์ ์ refetch ํ๊ณ ์ด๋ ๊ฒ ๋ค์ ๊ฐ์ ธ์์ง ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ค๋ ํน์ง์ด ์๋ค. ์๋ฅผ ๋ค์ด ํ์ด์ง ๋ค๋ก๊ฐ๊ธฐ๋ฅผ ํ๋ค๋ฉด ๋ก์ ์ฟผ๋ฆฌ๋ฅผ ๋ ๋๋งํ๋ ค ํ ๊ฒ์ด๊ณ , Relay๋ ๋ก์ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋คํธ์ํฌ๋ก๋ถํฐ refetchํด์ ๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ ๊ฒ์ด๋ค.
์ด๋ฐ ๋งํน์ ๋๋ถ๋ถ์ ๊ฒฝ์ฐ ์ ์ฉํ์ง๋ง, ๊ฐ๋์ ๋ฌดํจํ ์ฌ๋ถ๋์ ์๊ด์์ด ์ฆ์ refetchํด์ผ ํ ๋๊ฐ ์๋ค.
๋ง์ฝ ์ง๊ธ ์๋ ํ์ด์ง์ ์ฟผ๋ฆฌ๊ฐ ๋ก์ ์ฟผ๋ฆฌ๋ผ๋ฉด, ์ผ๋ถ ๋ฐ์ดํฐ๋ ์ ๋ฐ์ดํธ๊ฐ ํ์. ๊ทธ๋ฅ ๋งํนํ๋๊ฒ ๋ง์ผ๋ก๋ ์ฆ์ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค์ง๋ ์์๊ฑฐ๊ณ ๋ก์ ๋ฐ์ดํฐ๋ฅผ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ๋ณด์ฌ์ค ์ ์์.
์ด์ ํ์ด์ง๋ก ์ด๋ํ๊ธด ํด๋ ์ด์ ํ์ด์ง๊ฐ unmount๋์ง ์์๋ค๋ฉด ์ด์ ํ์ด์ง์ ๋ทฐ๊ฐ ๋ค์ ํ๊ฐ๋์ง๋ ์์ ๊ฒ์ด๊ณ , ๋ฐ๋ผ์ ๋ก์ ๋ฐ์ดํฐ๋ผ๋ ๊ทธ๋๋ก ์ฌ์ฉํ๊ฒ ๋ ๊ฒ์ด๋ค.
์ด๋ฐ ์ํฉ๋ค์ด ์๊ธฐ ๋๋ฌธ์ Relay๋ useSubscribeToInvalidationState
๋ผ๋ ํ
์ ์ ๊ณตํ๋ค.
function ProfilePage(props) {
// Example of querying data for the current page for a given user
const data = usePreloadedQuery(
graphql`...`,
props.preloadedQuery,
)
// Here we subscribe to changes in invalidation state for the given user ID.
// Whenever the user with that ID is marked as stale, the provided callback will
// be executed
useSubscribeToInvalidationState([props.userID], () => {
// Here we can do things like:
// - re-evaluate the query by passing a new preloadedQuery to usePreloadedQuery.
// - imperatively refetch any data
// - render a loading spinner or gray out the page to indicate that refetch
// is happening.
})
return (...);
}
์ฌ๊ธฐ์
useSubscribeInvalidationState
ํ ์ ์ธ์๋ก id๋ค์ด ๋ด๊ธด ๋ฐฐ์ด์ ๋ฐ๊ณ , ์ฝ๋ฐฑ๋ ํ๋ ๋ฐ๋๋ค. ์ ๋ฐฐ์ด์ ๋ด๊ธด id๋ค ์ค ํ๋๋ผ๋ ๋ก์ ๋ฐ์ดํฐ๋ผ๊ณ ๋งํน๋๋ค๋ฉด ์ฝ๋ฐฑ์ด ํธ์ถ๋๋ค.์ฝ๋ฐฑ ์์์๋ refetch ํ๊ฑฐ๋ ๋ก์ ๋ฐ์ดํฐ์ ์์กดํ๋ ํ์ฌ์ ๋ทฐ๋ฅผ ์ ๋ฐ์ดํธํ ์ ์๋ค. ์๋ฅผ ๋ค๋ฉด top-level์ ์๋
usePreloadedQuery
๋ฅผ ํธ์ถํด ๋ฐ์ดํฐ๋ฅผ ์ต์ ์ํ๋ก ์ ์งํ ์ ์๋ค.usePreloadedQuery
๋ ๋ก์ ์ฟผ๋ฆฌ๋ฅผ ํฌํจํ๊ณ ์๊ธฐ ๋๋ฌธ์ ๋น์ฐํ refetch๋๊ณ store ์บ์๋ ์ ๋ฐ์ดํธ ๋ ๊ฒ์ด๋ค.
Query Cache Expiration Time
์บ์ฑ๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง๊ณ ์ด๋ค operation์ ์ํํ๋๋ฐ๋ โ์ฟผ๋ฆฌ ์บ์ ๋ง๋ฃ ์๊ฐโ๋ ์ํฅ์ ์ค๋ค.
์ฟผ๋ฆฌ ์บ์ ๋ง๋ฃ ์๊ฐ ์ดํ๋ก ์๋กญ๊ฒ fetch๋์ง ์์ ์ฟผ๋ฆฌ์ด๊ฑฐ๋
์ฟผ๋ฆฌ๊ฐ ํฌํจํ๋ ๋ ์ฝ๋๋ค ์ค ์ ์ด๋ ํ๋๊ฐ ๋ฌดํจํ๋ ๋ ์ฝ๋์ผ ๊ฒฝ์ฐ
๊ทธ๋ฆฌ๊ณ store์ ์๋ ๋ ์ฝ๋๋ค๋ก๋ง ์ฟผ๋ฆฌ๋ฅผ ์ํํ ์ ์์ ๋ ์ด๋ฅผ ์ค๋๋ ์ฟผ๋ฆฌ๋ผ๊ณ ํ๋ค.
์ฟผ๋ฆฌ๊ฐ ๋ก์๋์ง๋ ์๋ก์ด request๊ฐ ๋ง๋ค์ด์ก์ ๋ ํ๋จํ๋ค. loadQuery
๋ฅผ ํธ์ถํ ๋๊ฐ ๊ทธ๋ ์ฃ . ์ค๋๋ ๋ฐ์ดํฐ๋ผ๋ ์ด๋ฅผ ์ฐธ์กฐํ๋ ์ปดํฌ๋ํธ์ ์ํด ๊ณ์ ๋ ๋๋ง๋ ์ ์๋ค. ํ์ง๋ง ์ค๋๋ ๋ฐ์ดํฐ๋ฅผ ์ด์ฉํด ๋ง๋ค์ด์ง ์ถ๊ฐ ์์ฒญ์ ๋คํธ์ํฌ๋ฅผ ํตํด ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์จ๋ค.
const store = new Store(source, { queryCacheExpirationTime : 5 * 60 * 1000 });
์ฟผ๋ฆฌ ์บ์ ๋ง๋ฃ์๊ฐ ์ญ์ ๋ง์ฐฌ๊ฐ์ง๋ก Store๋ฅผ ์์ฑํ ๋ ์ต์ ์ผ๋ก ์ค ์ ์๋ค.
์ฟผ๋ฆฌ ์บ์ ๋ง๋ฃ์๊ฐ ์ต์ ์ ๋ฐ๋ก ์ฃผ์ง ์์ผ๋ฉด ๋ก์ ์ฟผ๋ฆฌ์ธ์ง ๊ฒ์ฌํ๋ ์์ ์ ์ฐธ์กฐ๋ ๋ ์ฝ๋๊ฐ ๋ฌดํจํ๋์๋์ง ์ฌ๋ถ๋ง ์ฒดํฌํ๋ค. ๋ง๋ฃ์๊ฐ์ด ๋ฐ๋ก ์ง์ ๋์ง ์๋๋ค๋ ๋ป์ด๋ค.
Last updated