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

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

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

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

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

'use client'

import { useState } from 'react'
import { StatusEnum, useGetPetList } from 'infra/pet-store-api'

const statuses = [StatusEnum.Available, StatusEnum.Pending, StatusEnum.Sold]

export function PetTabs() {
  const [status, setStatus] = useState(StatusEnum.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/infra/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/findByStatus?status=${status}`],
  () => petStoreApi.pet.findPetsByStatus({ status }),
)

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

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

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

3.2 KiB Raw Permalink Blame History Unescape Escape