93 lines
2.3 KiB
Markdown
93 lines
2.3 KiB
Markdown
# 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 логика для запросов
|
||
- Оптимистичные обновления
|
||
- Автоматическая инвалидация кэша
|