Module · Frontend Engineer
State & Data Fetching
Server state in the cache, client state in the store, and the rest in the URL.
TOPIC 01
Server State
The data lives on the server - the cache is just a copy of it.
What you'll practice
- Name a Query and Its Cache Key — guided · beginner
- Invalidate After a Mutation — practice · intermediate
A command you'll meet
cat ~/frontend/src/api/orders.tsThe cache key is the identity of the request. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Name a Query and Its Cache Key
Every request needs a stable identity - the cache key. Write the query definition that names the key and says how long the data may be reused.
Invalidate After a Mutation
A write makes a cached read wrong. Write the mutation and the invalidation that follows it.
TOPIC 02
Client State
A small store for shared state, and the URL for the state that should be shareable.
What you'll practice
- Build a Small Shared Store — practice · intermediate
- Put Filter State in the URL — challenge · advanced
A command you'll meet
cat ~/frontend/src/store/cart.tsIf a state is worth sharing, it is worth a store. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Build a Small Shared Store
Not every piece of state needs a library. Write the small store the cart needs - state, subscribe and update.
Put Filter State in the URL
State that belongs in the URL is shareable, bookmarkable and survives a refresh. Write the hook that reads and writes it.