Svelte Example

Project Setup

For installation, configuration, and first-time setup, see the Svelte Tutorial.

Overview

This example demonstrates how to integrate ApiSorcery with Svelte projects. Svelte is a radical new approach to building user interfaces with a compiler-based architecture, and with TypeScript support, it provides an excellent developer experience with reactive state management.

Features

• Type safety: Full TypeScript support with generated interfaces and types
• Reactive stores: Svelte's reactive store patterns for state management
• Axios integration: Built-in support for Axios HTTP client with interceptors
• IntelliSense support: Full IDE support with auto-completion and type checking
• Tree shaking: Optimized bundle size with ES modules support

Demo Functionality

This demo app implements a complete User Management module backed by a live API:

• Paginated list — query users with filtering by code, name, and status
• Full CRUD — create, view, edit, and delete user records
• Avatar upload — upload images via POST /file/upload, with 10 MB size validation
• Excel export — download filtered results as .xlsx via the Blob response
• Field validation — async uniqueness check for the code field before form submission

Code Examples

Paginated List

import * as ApiUser from '$lib/api/auto/demo/ApiUser';
import type { UserInfoDto } from '$lib/api/auto/demo/model';

async function getUsers(page = 1, filters?: { code?: string; name?: string }) {
  const res = await ApiUser.getUserPaged({
    pagination: { page, limit: 10 },
    code: filters?.code || '',
    name: filters?.name || '',
  });
  return { users: res.results as UserInfoDto[], total: res.total || 0 };
}

Excel Export

import * as ApiUser from '$lib/api/auto/demo/ApiUser';

async function exportUsers(filters?: { code?: string; name?: string }) {
  const res = await ApiUser.exportUsers({
    code: filters?.code || '',
    name: filters?.name || '',
  });
  const url = URL.createObjectURL(res.data);
  const a = document.createElement('a');
  a.href = url;
  a.download = res.name || 'users.xlsx';
  a.click();
  URL.revokeObjectURL(url);
}

Avatar Upload

import * as ApiFile from '$lib/api/auto/demo/ApiFile';

async function uploadAvatar(file: File): Promise<string> {
  const sizeMB = file.size / 1024 / 1024;
  if (sizeMB > 10) throw new Error(`File size (${sizeMB.toFixed(2)} MB) exceeds the 10 MB limit`);
  const fileId = await ApiFile.uploadFile({ file });
  return `${import.meta.env.VITE_API_BASE_URL}/file/${fileId}`;
}

Best Practices

1. Type Definitions: Leverage generated TypeScript interfaces for better type safety
2. Reactive Stores: Use Svelte stores for shared state across components
3. Error Handling: Implement proper error handling in stores and components
4. Request Interceptors: Use Axios interceptors for authentication and request/response transformation
5. Environment Configuration: Use different API endpoints for development, staging, and production
6. Code Splitting: Implement lazy loading for routes and API modules to optimize bundle size
7. SvelteKit Integration: Utilize SvelteKit's load functions for server-side data fetching