# Client - React Query Integration

## Установленные пакеты

- `@tanstack/react-query` - управление серверным состоянием
- `ky` - современный HTTP-клиент

## Структура

### `/src/lib`
- `api.ts` - конфигурация HTTP-клиента (ky)
- `queryClient.ts` - конфигурация React Query

### `/src/hooks`
- `useAuth.ts` - хуки для аутентификации
  - `useLogin()` - вход
  - `useRegister()` - регистрация  
  - `useMe()` - получение текущего пользователя
  - `useLogout()` - выход

### `/src/types`
- `auth.ts` - TypeScript типы для аутентификации

## Примеры использования

### Логин
```tsx
import { useLogin } from "../hooks/useAuth";

function LoginPage() {
  const loginMutation = useLogin();

  const handleSubmit = async (data) => {
    try {
      await loginMutation.mutateAsync(data);
      // Успешный логин
    } catch (error) {
      // Обработка ошибки
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* форма */}
      {loginMutation.isPending && <p>Загрузка...</p>}
      {loginMutation.isError && <p>Ошибка!</p>}
    </form>
  );
}
```

### Получение текущего пользователя
```tsx
import { useMe } from "../hooks/useAuth";

function Profile() {
  const { data: user, isLoading, isError } = useMe();

  if (isLoading) return <div>Загрузка...</div>;
  if (isError) return <div>Ошибка</div>;

  return <div>Привет, {user?.name}!</div>;
}
```

### Выход
```tsx
import { useLogout } from "../hooks/useAuth";

function LogoutButton() {
  const logoutMutation = useLogout();

  return (
    <button onClick={() => logoutMutation.mutate()}>
      Выйти
    </button>
  );
}
```

## Фичи

### API клиент (ky)
- Автоматическое добавление Bearer токена из localStorage
- Префикс URL для всех запросов
- JSON по умолчанию

### React Query
- Автоматическое кэширование (5 минут)
- Retry логика для запросов
- Оптимистичные обновления
- Автоматическая инвалидация кэша