AIKraft/AI/Войти
AIKraft/Skills/data-fetching

data-fetching

Руководство по архитектуре получения данных: Service layer + Zustand Store + SWR. Применяется при загрузке данных, вызовах API, создании сервисов, работе с хуками стора и миграции с useEffect.

LOLobeHub official Разработка ★ 83k

Что делает навык

Архитектура получения данных, использующая Service Layer, Zustand Store и SWR для управления состоянием и кэшированием. Она обеспечивает разделение логики, предотвращает использование useEffect для загрузки данных и стандартизирует работу с API через lambdaClient.

Когда применять

  • Загрузка списков данных (List) с использованием хуков useFetchXxx и хранения в массивах.
  • Получение детальных данных (Detail) с кэшированием в Map и управлением состоянием загрузки по ID.
  • Выполнение операций записи (create, update, delete) с оптимистичным обновлением и инвалидацией кэша.
  • Миграция старой логики загрузки данных, использующей useEffect и useState, на новую архитектуру.

Как работает

  1. Создать Service Layer (класс с синглтон-экспортом), инкапсулирующий все вызовы lambdaClient (query для чтения, mutate для записи).
  2. Настроить Zustand Store с initialState для списков (массивы) и деталей (Map), а также состояний загрузки.
  3. Реализовать SWR-хуки (useClientDataSWR) в Store для чтения данных, обновляя состояние в onSuccess.
  4. Добавить методы refreshXxx в Store для инвалидации кэша через mutate() после мутаций.
  5. В компонентах вызывать хуки из Store и читать данные через селекторы или прямое обращение к стору, избегая useEffect.

Примеры запросов агенту

Реализуй Service Layer для домена agentEval с методами listBenchmarks и createBenchmark.
Создай хук useFetchBenchmarks в Zustand Store, использующий useClientDataSWR для загрузки списка бенчмарков.
Напиши компонент BenchmarkDetail, который получает данные через useFetchBenchmarkDetail и отображает их с учетом состояния загрузки.

Что понадобится

  • Среда с поддержкой TypeScript, React, Zustand и SWR.
  • Наличие lambdaClient (TRPC Client) для взаимодействия с бэкендом.
  • Следование соглашениям об именовании из навыка store-data-structures.

Описание составлено по SKILL.md навыка, сверено 08.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «data-fetching» из репозитория: # https://github.com/lobehub/lobehub
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r data-fetching/ ~/.claude/skills/data-fetching/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.