Skip to main content

Concern

HTTP client for calling APIs from the browser.

Technology

Axios

Documentation​

Configuration

Base URL comes from import.meta.env.VITE_BACKEND_URL. When unset: in development (when getEnvironment() is Environment.Development; see pattern environments) the client defaults to http://localhost:3000 so API calls target the backend; in acceptance or production build the default is '' and you must set VITE_BACKEND_URL at build time (e.g. /api for same-origin) so the frontend talks to the backend.

Environment variables​

Reference the same vars as vite (e.g. VITE_BACKEND_URL); set in dev and at build time in deployment. VITE_ENVIRONMENT (build-time, set in DO app specs for acceptance/production) is used by getEnvironment() (see pattern environments); the API client uses it to decide the default base URL when VITE_BACKEND_URL is unset.

Implementation

All API calls from the frontend go through the shared client in frontends/shared/src/lib/api.ts. That module creates a single Axios instance whose base URL is import.meta.env.VITE_BACKEND_URL when set; when unset, it uses getEnvironment() (from frontends/shared/src/lib/environment.ts): if Environment.Development, default to http://localhost:3000; otherwise '' (set VITE_BACKEND_URL at build time for deployment). It exports handleRequest<T> (get, post, put, patch, delete), which returns the envelope on 2xx/4xx and throws ServerError (from shared/api-response) on 5xx. Frontend services (e.g. frontends/shared/src/services/auth.ts) use handleRequest; mutations receive client errors as return values (for form setError) and server errors as thrown (for onError toaster). frontends/shared/src/env.d.ts declares the types for ImportMeta.env (including VITE_BACKEND_URL, VITE_ENVIRONMENT). Frontends import from frontends-shared/lib/api and from frontends-shared/services/* for service-backed mutations.

Integration

server-state / TanStack Query​

Services use handleRequest (which throws on 5xx) so that the service function can be used as mutationFn; client errors are returned, server errors throw. See pattern responses and forms.

Version

v1