init

client/README.md

@@ -0,0 +1,92 @@
+# 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 логика для запросов
+- Оптимистичные обновления
+- Автоматическая инвалидация кэша