routeAction$

Con routeAction$ podemos manejar el comportamiento de las peticiones a la hora de hacer submit a un formulario. Para ello, Qwik dispone de un componente formulario propio, que junto al método routeAction$ hace que acceder al contenido de los inputs de los form sea sencillo. En el siguiente ejemplo, puedes ver como al pasarle el parámetro values, podemos acceder al contenido del input del form a través de values.search, ya que ese es el valor del name del input.

export const useGetMovies = routeAction$(async (values) => {
  const title = values.search || "batman";
  const url = 'http://www.omdbapi.com/?apikey=FAKEAPIKEY&s=' + title;
  const res = await fetch(url);
  const data = await res.json();

  const list = data.Search as Movie[];

  return {
    movies: list,
  };
});

export default component$(() => {
  useStylesScoped$(styles);
  const defaultMovie = useSignal("batman");
  const movies = useGetMovies();

  useVisibleTask$(() => {
    document.querySelector("button")?.click();
  });

  return (
    <div class="grid">
      <header class="header">
        <Link href="/">Inicio</Link>
        <h1>Tu buscador de pelis favorito</h1>
        <Form class="header-form" action={movies}>
          <input
            class="header-input"
            name="search"
            type="text"
            value={defaultMovie.value}
          />
          <button class="link">Buscar peli</button>
        </Form>
      </header>
      <main class="main">
        {movies.value?.movies ? (
          <ul class="movies">
            {movies.value.movies.map((movie) => (
              <li key={movie.imdbID} class="movie">
                <img src={movie.Poster} alt={movie.Title} />
                <p>{movie.Title}</p>
              </li>
            ))}
          </ul>
        ) : (
          <p>No hay pelis</p>
        )}
      </main>
      <footer class="footer">
        <p>Hecho con Qwik</p>
      </footer>
    </div>
  );
});
          

Este es el resultado: