Infinite query: живой покедекс
createInfiniteQuery поверх offset/limit-пагинации PokeAPI — параметр следующей страницы достаётся из URL next, который возвращает API; null завершает список. UI управляют loading-флаги из 0.15: $isInitialLoading показывает скелетон первой страницы, $isFetchingNextPage — спиннер на кнопке «load more», пока уже загруженные страницы остаются на экране.
Заметки
- Void-параметры работают —
start()без аргументов; эффект получает{ params: undefined, pageParam }. $pagesнакапливает результаты страниц; рендерьтеpages.flatMap((p) => p.results).- Loading-флаги:
$isInitialLoading(страниц ещё нет — скелетон),$isFetchingNextPage/$isFetchingPreviousPage(какой конец списка грузится),$isRefetching(refetchAllперезагружает загруженное окно). - Двунаправленные списки: задайте
getPreviousPageParamи используйтеfetchPrevious/$hasPreviousPage;maxPagesограничивает окно. - В React/Vue/Solid те же юниты доступны через
useUnit(pokedex)благодаря@@unitShape— см. биндинги.
Запускаемый скрипт: examples/infinite-pokeapi.ts. Полное API: createInfiniteQuery.