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.

Validator

⏱ 0:00

IDLE — checks run live as you type commands; submit when done

01Requirements

live checks

3 steps

01
Write the query function
The query function is the fetcher. It returns the parsed body - the cache does the rest.
echo 'import type { Order } from "../types/order";\n\nexport async function fetchOrders(cursor?: string): Promise<Order[]> {\n const query = cursor ? "?cursor=" + cursor : "";\n const response = await fetch("/api/orders" + query);\n return (await response.json()) as Order[];\n}' > ~/frontend/src/api/orders.ts
02
Add the query definition
The query key is a tuple - the resource and its parameters. Two different queries must never share a key.
echo '\n\nexport const ordersQuery = {\n queryKey: ["orders", "list"],\n queryFn: () => fetchOrders(),\n staleTime: 30_000,\n};' >> ~/frontend/src/api/orders.ts
03
Verify and submit
cat the file, then submit for validation.
cat ~/frontend/src/api/orders.ts

0 of 3 revealed

Take a hint without losing the lab — each one points at the thing to look at, not at the answer.

guides, never solves

Tell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?

saved locally in this browser

learner@lab — ubuntu:24.04

Session is disposable

↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list

← Previous lab

Memoise the Expensive Parts

React Fundamentals

Next lab →

Invalidate After a Mutation

State & Data Fetching