Skip to content

Infinite query: a live pokedex

createInfiniteQuery over PokeAPI's offset/limit pagination — the next page param is lifted out of the next URL the API returns, null ends the list. The 0.15 loading flavors drive the UI: $isInitialLoading shows the first-page skeleton, $isFetchingNextPage puts the spinner on the "load more" button while already-loaded pages stay visible.

Notes

  • Void params are finestart() without arguments; the effect receives { params: undefined, pageParam }.
  • $pages accumulates page results; render pages.flatMap((p) => p.results).
  • Loading flags: $isInitialLoading (no pages yet — skeleton), $isFetchingNextPage / $isFetchingPreviousPage (which end is loading), $isRefetching (refetchAll re-runs the loaded window).
  • Bidirectional lists: provide getPreviousPageParam and use fetchPrevious / $hasPreviousPage; maxPages caps the window.
  • In React/Vue/Solid the same units come from useUnit(pokedex) via @@unitShape — see bindings.

Runnable script version: examples/infinite-pokeapi.ts. Full API: createInfiniteQuery.

MIT Licensed