Apollo Client Cache Workshop

An interactive workshop app for exploring Apollo Client's InMemoryCache strategies with a real REST API. Built with React + Vite, using @apollo/client and apollo-link-rest against the SWAPI Star Wars API.

---

What it covers

Five live demos, switchable from the UI — each one swaps the entire Apollo client so the cache behaviour is immediately visible:

#	Demo	What to observe
1	Default InMemoryCache	Plain cache, zero config. Cache keys auto-generated from url field. Click a character, go back, click again — second load is instant (cache hit).
2	keyFields + virtual fields	Cache keys use name instead of the auto-generated URL key. A computed displayName field is derived from name + birth_year via a read function — no extra network call.
3	Field merge policy	Explicit merge function on the people field. Prevents Apollo's "field write" warning on array fields and shows how to control how incoming data is merged into the cache.
4	TTL — stale after 5s	Character detail data expires after 5 seconds. Re-opening the same character within 5s = instant (cache). After 5s, Apollo re-fetches from the network. Implemented via a custom ttlFetchPolicy helper in the query layer, not the cache config.
5	Cache redirects	Opening a character detail fires zero network requests — the answer comes from data already in the cache from the list query, resolved via toReference() in a read function.

---

Getting started

npm install
npm run dev

Open http://localhost:5173.

Note: Requests to swapi.info are proxied through Vite's dev server (/swapi/ → https://swapi.info/api) to avoid CORS issues.

---

How to test each demo

1. Open the app — characters load automatically. The ⚡ Show Cache button in the bottom-right shows the live normalized cache.

2. Pick a demo using the numbered buttons at the top. Switching resets the client and clears the cache.

3. Use the Network tab in DevTools to verify when requests are made vs. served from cache.

Demo-by-demo walkthrough

Demo 1 — Default cache

• Click any character → network request fires, detail loads.
• Go back → click the same character again → no network request (cache hit).
• Open the cache inspector → see Person:{...} entries keyed by URL.

Demo 2 — keyFields

• Same flow as Demo 1, but open the cache inspector — keys are now Person:{"name":"Luke Skywalker"} instead of the URL.
• The displayName virtual field shows Luke Skywalker (19BBY) — computed on read, not stored.

Demo 3 — Field merge policy

• Without a merge function, Apollo warns when writing arrays. This demo silences that by declaring an explicit merge.
• Navigate pages — the merge function accumulates results in the cache.

Demo 4 — TTL

• Click a character → note the network request.
• Go back and re-open within 5 seconds → instant, no network request.
• Wait 5 seconds, re-open → network request fires again (cache treated as stale).

Demo 5 — Cache redirects

• Load the list (one network request for all 82 people).
• Click any character → no detail network request — toReference() resolves the answer from the already-cached list data.
• Verify in the Network tab: only the initial list request appears.

---

Stack

Package	Role
@apollo/client	GraphQL client + InMemoryCache
apollo-link-rest	Translates @rest(...) directives to fetch calls
react + vite	UI + dev server (with proxy)
swapi.info	Star Wars REST API, no auth required