stream.graff.tech-new/client

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 типы для аутентификации

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

Логин

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>
  );
}

Получение текущего пользователя

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>;
}

Выход

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