Files
Job-Info/components/api-client
aewing 05f8e2e3b6 Add ModeTemplate with Svelte 5 frontend and components
- Create reusable components: auth, api-client, shared-types
- ModeTemplate with Hono backend and SvelteKit frontend
- Auth store refactored to class-based Svelte 5 pattern
- SSR-safe hydrate() pattern for localStorage access
- Frontend builds successfully with Svelte 5 runes
2026-01-21 05:12:25 +00:00
..

API Client Component

Frontend helper for making authenticated requests to the backend.

Usage

import { createApiClient } from './components/api-client';
import { STORAGE_KEYS } from './components/auth';

// Create client with token getter
const api = createApiClient({
  baseUrl: '/api',  // or 'http://localhost:3005/api'
  getToken: () => localStorage.getItem(STORAGE_KEYS.PB_TOKEN),
});

// Make requests
const result = await api.get<User[]>('/users');

if (result.ok) {
  console.log(result.data);  // User[]
} else {
  console.error(result.error);  // Error message
}

// POST with body
const created = await api.post<Job>('/jobs', {
  title: 'New Job',
  status: 'open',
});

Methods

  • api.get<T>(path) - GET request
  • api.post<T>(path, body?) - POST request
  • api.put<T>(path, body?) - PUT request
  • api.patch<T>(path, body?) - PATCH request
  • api.delete<T>(path) - DELETE request

Response Type

interface ApiResponse<T> {
  ok: boolean;      // true if status 2xx
  status: number;   // HTTP status code
  data?: T;         // Response data (if ok)
  error?: string;   // Error message (if not ok)
}

Copying to a Mode

  1. Copy components/api-client/ to your mode's frontend/lib/api-client/
  2. Update imports

Dependencies

None - fully self-contained. No package.json needed - inherits from consuming project.