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).
|