89 lines
3.2 KiB
Markdown
89 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 { 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-модуль сервиса:
|
|||
|
|
|
|||
|
|
```text
|
|||
|
|
src/infra/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/findByStatus?status=${status}`],
|
|||
|
|
() => petStoreApi.pet.findPetsByStatus({ status }),
|
|||
|
|
)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Такой код теряет единое место для ключей, дублирует fetcher и разносит инфраструктурные детали по UI.
|
|||
|
|
|
|||
|
|
## Когда выбрать другую стратегию
|
|||
|
|
|
|||
|
|
- Данные нужны до первого HTML — [Серверный await](/docs/applied/data-fetch/server-await).
|
|||
|
|
- Клиентский хук должен получить начальные данные сразу — [Начальные данные для клиентских хуков](/docs/applied/data-fetch/client-hooks-initial-data).
|
|||
|
|
- Нужно вычислить бизнес-состояние — [Business-композиция](/docs/applied/data-fetch/business-composition).
|