Skip to content

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.

Под лицензией MIT