S.Gromov
f2358da397
- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов - Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime - Удалены устаревшие файлы (спрайты, скрипты, стили из app/)
90 lines
3.2 KiB
Markdown
90 lines
3.2 KiB
Markdown
---
|
||
title: Клиентский GET-хук
|
||
description: Получение REST-данных в Client Components через готовые GET-хуки REST-клиента.
|
||
keywords: [rest, client components, swr, get-хук, client state]
|
||
---
|
||
|
||
# Клиентский GET-хук
|
||
|
||
Клиентский GET-хук используется, когда данные зависят от состояния браузера: вкладки, фильтра, поиска, пагинации, модалки или действия пользователя.
|
||
|
||
## Когда использовать
|
||
|
||
- Запрос зависит от client state.
|
||
- Данные не обязательны для первого HTML.
|
||
- Пользователь меняет параметры запроса на клиенте.
|
||
- Нужны SWR-кеширование, дедупликация и ревалидация.
|
||
|
||
## Пример с вкладками
|
||
|
||
```tsx
|
||
'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-модуль сервиса:
|
||
|
||
```text
|
||
src/infrastructure/pet-store-api/hooks/use-get-pet-list.hook.ts
|
||
```
|
||
|
||
Не создавайте локальный `useSWR` в компоненте.
|
||
|
||
## Плохо
|
||
|
||
```tsx
|
||
// Плохо — прямой вызов клиента в 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](./server-await.md).
|
||
- Клиентский хук должен получить начальные данные сразу — [Начальные данные для клиентских хуков](./client-hooks-initial-data.md).
|
||
- Нужно вычислить бизнес-состояние — [Business-композиция](./business-composition.md).
|