메뉴
How to fetch data in the AMC web app — the apiClient helper, visibility-aware polling / EventSource / WebSocket wrappers in src/lib/api/_api.ts, per-domain API modules, and protobuf decoding. Read before adding any network call.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | api-layer |
| description | How to fetch data in the AMC web app — the apiClient helper, visibility-aware polling / EventSource / WebSocket wrappers in src/lib/api/_api.ts, per-domain API modules, and protobuf decoding. Read before adding any network call. |
All backend communication lives in src/lib/api/. Never call fetch / EventSource / WebSocket directly in components — use or extend the helpers in src/lib/api/_api.ts.
src/lib/api/_api.ts)| Helper | Use for |
|---|---|
apiClient<TData>(url, signal, defaultValue, errorContext) | One-shot JSON GET with standardized error handling; returns defaultValue on abort |
startVisibilityAwarePolling | Repeated fetches on an interval; pauses when the tab is hidden, resumes + refetches when visible |
startVisibilityAwareEventSource<T> | SSE streams (JSON messages); closes when hidden, reopens when visible |
startVisibilityAwareWebSocket | Binary protobuf WebSocket streams (['protobuf'] subprotocol, arraybuffer); reconnects on visibility change |
isAbortError(error) | Detects both DOM AbortError and Svelte StaleReactionError |
All stream/polling helpers take an AbortSignal and clean up listeners on abort. In components, pass Svelte's getAbortSignal() (imported from svelte) so streams die with the component.
One file per domain: player.ts, delivery.ts, housing.ts, championship.ts, event.ts, radio.ts, teams.ts, teleport.ts, shortcutZone.ts. Shared response types in src/lib/api/types.ts.
Endpoint URLs use the base `${PUBLIC_API_BASE}/api/` (PUBLIC_API_BASE from $env/static/public) unless specified otherwise — e.g. `${PUBLIC_API_BASE}/api/player_positions/`. Default new endpoints to this base.
Follow the existing shape when adding an endpoint: exported function taking a callback + abortSignal (streams) or signal (one-shot), delegating to a _api.ts helper.
Binary streams decode with @bufbuild/protobuf:
import { fromBinary } from '@bufbuild/protobuf';
import { PlayerPositionsSchema } from './proto/generated/player_positions_pb';
// inside onMessage:
callback(fromBinary(PlayerPositionsSchema, new Uint8Array(data)));
Schemas are generated from src/lib/api/proto/*.proto via pnpm proto:generate — never edit proto/generated/.
In dev, /stream, /icecast-status, and /login/token are proxied by Vite (see vite.config.ts) using VITE_MAIN_SITE, VITE_ICE_CAST, VITE_API_BASE — see [[env-config]].
Related: [[env-config]], [[architecture]]
The pakop C#/.NET WASM module (CUE4Parse-based) — what it does (pak-file inspection/hashing), how to build it (pnpm build:pakop), and how to consume it (lazy dynamic import). Read before touching wasm/pakop or the pak routes.
The AMC app shell — hooks.server.ts prerender-time head injection (SEO meta, theme-color, font preloads, icons), hooks.ts URL delocalization, and asset import suffixes (?no-inline, ?url). Read before changing global head tags, fonts, SEO metadata, or hooks.
High-level architecture of the AMC web app — SvelteKit static/SPA hybrid, Vite plugin pipeline, i18n strategy, WASM modules, dev-server proxies. Read before making structural or build-related changes.
Utility function conventions in the AMC web repo — es-toolkit for lodash-like helpers (lodash-es was removed), but check src/lib/utils first. Read before adding utility helpers.
Import path aliases ($lib, $messages) and workspace packages used in the AMC web repo. Read when writing imports or resolving where a module comes from.
Overlay/floating UI conventions in the AMC web repo — use the homegrown `portal` action from $lib/utils/portal (svelte-portal package is not used/dependency), as done in Tooltip and Modal. Read before building modals, tooltips, or popovers.