vontor-cz/frontend/src/api

API Documentation

Quick Start

All API hooks are available from @/api:

import { useApiCommerceOrdersList, OrderRead } from '@/api';

Navigation Tips

Finding Hooks

Pattern: useApi[Tag][Path][Method]

What you want	Hook name
List orders	useApiCommerceOrdersList
Get order by ID	useApiCommerceOrdersRetrieve
Create order	useApiCommerceOrdersCreate
Update order	useApiCommerceOrdersPartialUpdate
Delete order	useApiCommerceOrdersDestroy

VS Code Shortcuts

• Ctrl/Cmd + P → Quick file search (type "commerce")
• Ctrl/Cmd + Shift + O → Symbol search (type "useApi")
• F12 → Go to definition
• Shift + F12 → Find all usages

Common Patterns

Query (GET)

const { data, isLoading, error } = useApiCommerceOrdersList({
  page: 1,
  limit: 10,
});

Mutation (POST/PUT/PATCH/DELETE)

const mutation = useApiCommerceOrdersCreate({
  mutation: {
    onSuccess: (data) => console.log('Created!', data),
    onError: (error) => console.error('Failed:', error),
  }
});

mutation.mutate({ data: orderData });

With Infinite Scroll

const { 
  data, 
  fetchNextPage, 
  hasNextPage 
} = useApiCommerceOrdersListInfinite({
  limit: 20,
});

File Organization

api/
├── index.ts              ← Import everything from here
├── publicClient.ts       ← Public API client (no auth)
├── privateClient.ts      ← Private API client (with auth)
└── generated/
    ├── public/           ← Public endpoints
    │   ├── public.ts
    │   └── models/
    └── private/          ← Private endpoints (organized by tag)
        ├── account/account.ts
        ├── commerce/commerce.ts
        ├── downloader/downloader.ts
        ├── gopay/gopay.ts
        ├── stripe/stripe.ts
        ├── trading212/trading212.ts
        ├── zasilkovna/zasilkovna.ts
        ├── core/core.ts
        └── models/       ← Shared TypeScript types

Tips

1. Use TypeScript autocomplete: Type useApi and let IntelliSense show you options
2. Hover for docs: Hover over any hook to see endpoint details
3. Check models folder: All response types are in models/
4. Use React Query DevTools: Add <ReactQueryDevtools /> to see cache state

Regenerating

npm run api:gen

This will:

1. Fetch OpenAPI schema from backend
2. Generate TypeScript hooks
3. Format with Prettier
4. Update all types