aewing
05f8e2e3b6
- 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
60 lines
1.4 KiB
Markdown
60 lines
1.4 KiB
Markdown
# API Client Component
|
|
|
|
Frontend helper for making authenticated requests to the backend.
|
|
|
|
## Usage
|
|
|
|
```typescript
|
|
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
|
|
|
|
```typescript
|
|
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.
|