write-frontend-codelisted

# Write frontend code Examples: React + Next.js (Pages Router), neutral `listing` domain. principle → **▸ Example** → **▸ Other stacks**. Where files go: `structure-a-frontend-app`. General style (early return, pipelines, naming, SOLID, deep copy, casts): `code-conventions`. > **The data/state stack ships through the shared UI lib.** React Query, Zustand, debounce, the HTTP > client, theme tokens etc. are re-exported from `@org/web-ui` (placeholder for your in-house > design-system package) — so they aren't direct deps of the app. Import from `@org/web-ui[/utils| > /store|/queries]`, not the raw libraries. ## 1. Data fetching & mutations — React Query Server data goes through a query layer per feature, never ad-hoc `fetch` in components. A feature's data folder has four files: `.keys.ts` (key factory), `.queries.ts` (reads), `.mutations.ts` (writes), `.types.ts`. - **Key factory** — namespaced nested arrays, so invalidation is precise: ```ts // listing.keys.ts const listingKeys = { all: ['listing'] as const }; export const listingQuery = { detail: (id?: string) => (id ? [...listingKeys.all, 'detail', id] : [...listingKeys.all, 'detail']), list: (params?: ListListingsRequest) => [...listingKeys.all, 'list', params] as const, }; ``` - **Query hook** — `enabled` guard + per-query `staleTime` override + `placeholderData` to avoid flicker: ```ts export const useListingDetail = ({ id, options = {} }) => useQuery(listingQuery.detail(id), () => listi