Клиентский GET-хук

Клиентский GET-хук используется, когда данные зависят от состояния браузера: вкладки, фильтра, поиска, пагинации, модалки или действия пользователя.

Когда использовать

• Запрос зависит от client state.
• Данные не обязательны для первого HTML.
• Пользователь меняет параметры запроса на клиенте.
• Нужны SWR-кеширование, дедупликация и ревалидация.

Пример с вкладками

'use client'

import { useState } from 'react'
import { useGetPetList } from 'infrastructure/pet-store-api'
import type { PetStatus } from 'infrastructure/pet-store-api'

const statuses: PetStatus[] = ['available', 'pending', 'sold']

export function PetTabs() {
  const [status, setStatus] = useState<PetStatus>('available')
  const { data: pets, isLoading, error } = useGetPetList(status)

  return (
    <section>
      <div>
        {statuses.map((item) => (
          <button key={item} type="button" onClick={() => setStatus(item)}>
            {item}
          </button>
        ))}
      </div>

      {isLoading && <div>Загрузка...</div>}
      {error && <div>Ошибка загрузки</div>}

      <ul>
        {pets?.map((pet) => (
          <li key={pet.id}>{pet.name}</li>
        ))}
      </ul>
    </section>
  )
}

Компонент выбирает параметр status, но не знает про SWR-ключ и fetcher. Запрос выполняет готовый GET-хук REST-клиента.

Если хука нет

Хук добавляется в REST-модуль сервиса:

src/infrastructure/pet-store-api/hooks/use-get-pet-list.hook.ts

Не создавайте локальный useSWR в компоненте.

Плохо

// Плохо — прямой вызов клиента в useEffect
useEffect(() => {
  petStoreApi.pet.findPetsByStatus({ status }).then(setPets)
}, [status])

// Плохо — useSWR в компоненте
const { data } = useSWR(
  ['pet-store-api', 'pet', 'list', status],
  () => petStoreApi.pet.findPetsByStatus({ status }),
)

Такой код теряет единое место для ключей, дублирует fetcher и разносит инфраструктурные детали по UI.

Когда выбрать другую стратегию

• Данные нужны до первого HTML — Серверный await.
• Клиентский хук должен получить начальные данные сразу — Начальные данные для клиентских хуков.
• Нужно вычислить бизнес-состояние — Business-композиция.