Data fetching

This example shows how data can be fetched with loading state and error handling.

:ruby
  def self.get_initial_state(**) = {
    result: nil,
    error: nil,
  }

  def mount
    result = helpers
      .fetch("https://pokeapi.co/api/v2/pokemon/#{$id}")
      .json(symbolize_names: true)
    update(result:)
  rescue => e
    update(error: e.message)
  end

%div
  = if error = state[:error]
    %p.error= error
  = elsif result = state[:result]
    %pre= JSON.pretty_generate(result)
  = else
    %p Loading Pokémon with id #{$id}…

This component can be used like this:

:ruby
  Pokemon = import("./Pokemon")
%Pokemon(id=123)

Demo

Loading…