UniventsFrontend
Coding Conventions
How the Univents frontend consumes the API — generated clients, store flows, realtime.
Consume the generated client
- All API calls go through
@trieoh/univents-api(orval-generated from the spec). No hand-written fetch wrappers per endpoint. - Regenerate after spec changes:
pnpm orval— the client is not hand-edited. - Use the generated TanStack Query hooks; let React Query own caching/retry/invalidation.
Runtime setup
Configure the shared fetch stack once, at app startup:
configureApiClient({
baseURL: env.VITE_API_URL, // → https://api.trieoh.com/univents
authBaseURL: env.VITE_AUTH_API_URL, // used for token refresh
})Envelope & errors
- The
fun.Responseenvelope is unwrapped at the client layer — you never see it. Success returns the payload directly. - Failures reject with
ApiError: the envelope is in.envelope, so error UI readserror.envelope.error.message(or the typed code). - Public/anonymous routes (catalog browsing, certification verification, store stream): call generated hooks with
{ public: true }.
The store flow
- Checkout (
createEditionCheckout) returns the purchase + Payssage intent; the buyer pays in the Payssage flow (Pix shows the QR; cards tokenize via@mercadopago/sdk-js). - Track the purchase live:
GET /ws/token?purchase_id=…→ openWS /ws— frames:purchase.snapshot,intent.updated,purchase.confirmed,purchase.expired,purchase.cancelled.- Or
GET /editions/{id}/store/streamwithfetch-event-source(SSE) for stock deltas.
- Poll nothing: the realtime surfaces replace polling. After a terminal frame, close the socket and refetch the purchase.
Authentication
- Users authenticate through IdentityX; the JWT's
subject.idis the purchaser/owner id downstream. - Tokens are attached by the shared fetcher; refresh via
authBaseURL. No manuallocalStoragetoken stashing.
Keeping in sync with the spec
- Spec changed? Run
just generate-orvaland let the type errors guide the UI updates. - Generated types are the source of truth — don't
as-cast around them.
Don't
- Don't call endpoints by URL string — import the generated functions.
- Don't hand-roll response envelopes or error parsing.
- Don't render stock/counts from cached payloads forever — follow the realtime deltas.