Qwik — API REST / GraphQL
Claves para entender como podemos consumir información de APIs externas mediante casos prácticos
El consumo de información de las APIs (habitualmente REST aunque hay opciones como GraphQL) es una de las partes más importantes de cualquier aplicación Frontend.
Los conceptos sobre esta manera de trabajar son comunes para todas las tecnologías donde trabajamos con aplicaciones Frontend. Por lo tanto, si entendemos bien los conceptos en una tecnología, no vamos a tener muchos problemas en aplicarlo en otros frameworks, librerías,…, sea en Qwik, Javascript puro o en tecnologías como Angular, React,…
Cuando trabajamos con la acción de consumir información de APIs externas estaremos obtenemos información de los recursos que nos proporciona una web para poder realizar las acciones como leer, crear, modificar y eliminar, lo que solemos conocer como CRUD.
No todas las APIs nos dan opción de modificar la información, muchas de ellas podríamos decir que son básicas, en las que reciben los datos que requerimos y nos devuelve un resultado. Esto es lo básico de una API y en todas vamos a ver esto seguro.
El objetivo principal es que aprendamos a hacer uso de este recurso como es consumir una API en Qwik.
Os recomiendo leer los artículos anteriores en orden y si practicáis, ¡¡mucho mejor!!.
Recordad, que si hay dudas, aun leyéndolo, podéis preguntarlo en los comentarios y sin dudas me gustaría que me comentéis también, para tener feedback.
El resultado final de lo que vamos a trabajar es lo que veis a continuación
Todos los artículos publicados del curso los encontraréis en la siguiente lista que iré actualizando semanalmente y estableciendo el orden natural recomendado:
Los requisitos a tener en cuenta son los mismos que en todos los artículos y para trabajar en este artículo crearemos un nuevo proyecto en una versión más actual de la que hemos estado trabajando hasta este mismo instante. Ya sabéis como se hace, a día de hoy (07/03/2023) la versión más actual es la 0.19.2
Esto es lo que vamos a ver en este artículo:
- Información de APIs disponibles de manera pública.
- Introducción al consumo de una API REST (lo común) desde el navegador.
- Consumir API REST con Qwik.
- Consumo de API GraphQL desde el navegador.
- Consumir API GraphQL con Qwik.
Repositorio de APIs públicas disponibles de manera gratuita
Seguramente haya referencias donde encontremos muchas más APIs (si las tenéis compartirlas por favor), pero estas referencias son super completas y se van actualizando periódicamente. Las voy a clasificar en dos puntos principales, como REST y GraphQL. Agradecería que en los comentarios añadáis más opciones ;)
REST
En cada una de estas referencias, podremos ver que las APIs se clasifican en categorías como Animales, Anime, Conversores de divisas,… Os invito a que veáis la referencia con calma para ver que opciones encontráis, seguramente haya algo de un tema que os interese verdaderamente y siendo así, os invito a que practiquéis con ello ajeno a lo que vamos a trabajar en este apartado.
GraphQL
En cada una de estas referencias, podremos ver que las APIs se clasifican en categorías como APIs oficiales y APIs de solo demostración, entre otras opciones. Como os he mencionado anteriormente, visualizar el documento con calma para ver si encontráis algo que os resulte interesante.
Una vez disponibles estos recursos, vamos a comenzar a trabajar consumiendo una API REST desde el navegador.
Consumiendo API REST desde el navegador
En este caso usaré la API llamada Ergast F1, API que nos va a proporcionar información sobre los diferentes aspectos de la Formula 1 como circuitos, temporadas, pilotos, resultados actuales y de temporadas anteriores,…
Para acceder a esta API lo hacemos mediante este enlace:
Si tenéis conocimientos de como se consume una API REST os animo a pasar al siguiente punto donde ya se puede ver como consumir las APIs REST desde Qwik.
Vamos a trabajar únicamente con uno de esos apartados, por ejemplo el calendario de las carreras del año actual (Race Schedule), así podríamos plantear un mini-proyecto con el calendario actual (2023) de la Formula 1.
Pulsamos en esa opción para acceder a su información:
Una vez en el apartado principal, tenemos la opción de acceder a la temporada actual mediante current:
En este caso os recomendaría acceder mediante el año (2023) siendo esta la URL:
https://ergast.com/api/f1/2023
Ahora mismo se ve de esta manera:
Para verlo en formato JSON, lo que tenemos que hacer es añadirle al final “.json” siendo la URL lo siguiente:
https://ergast.com/api/f1/2023.json
Y esto será lo que veamos, por lo que ya estamos listos para consumir esa información desde nuestro proyecto Qwik:
Si quisiéramos obtener la información completa de las carreras, deberíamos de realizar esta selección:
Reflejándose en el acceso a los datos dentro de nuestro proyecto, que lo aplicaremos en el siguiente paso:
const data = await fetch(URL).json();
const resultRaces = data['MRData']['RaceTable']['Races'];Y con esto tendríamos un array del número de carreras que pertenecen
Consumir API REST en Qwik
Asumo que ya tenéis el proyecto creado y disponible para trabajar con ello
Comenzamos con este apartado, donde vamos a obtener la lista de carreras de una temporada concreta de Formula 1 y vamos a empezar añadiendo como valor fijo la temporada actual, la 2023 que acaba de iniciarse este fin de semana.
La URL que usaremos es la siguiente:
https://ergast.com/api/f1/2023.json
Siguiendo el formato:
https://ergast.com/api/f1/<AÑO>.json
Donde <AÑO> es un número entre 1950 y 2023 que son las temporadas existentes de Formula 1 a día de hoy (07/03/2023).
Este dato lo vamos a usar para la segunda parte de este punto donde podremos seleccionar el año y así obtener la lista de carreras de la temporada seleccionada.
Creamos lo primero la función para consumir los datos de la URL que acabamos de ver y esto lo hacemos dentro de la carpeta api (la creamos dentro de src) en el fichero ergast-f1.ts añadiendo el siguiente código
// 0 - Fichero alojado en: src/api/ergast-f1.ts
// 1.- URL principal de la API - BASE API URL
const API_URL = 'https://ergast.com/api/f1/';
// 2.- Reniendo en cuenta la URL https://ergast.com/api/f1/<AÑO>.json
export const ergastF1ChampionshipRaceListAPI = async (
year: string,
controller?: AbortController
): Promise<Array<any>> => {
// 3.- CREAMOS la referencia del AÑO con el recurso JSON
const endPoint = `${year}.json`;
// 4.- Formamos la URL completa del recurso para la lista de carreras
const url = `${API_URL}${endPoint}`;
console.log('Vamos a obtener datos desde =====>', url);
// 5.- Pedimos los datos del año seleccionado
const data = await fetch(url, {
method: 'GET',
signal: controller?.signal,
// 8.- Uso de Abort Controller (controller.signal).
// Gestionamos las posibles cancelaciones en ejecución
});
console.log('FETCH resolved');
// 6.- Lista de carreras
const json: Array<any> = (await data.json())['MRData']['RaceTable']['Races'];
// 7.- Devolvemos resultado
return Array.isArray(json) ? json : Promise.reject(json);
};Ahora que ya tenemos la función para obtener los datos REST de la URL seleccionado, vamos al componente correspondiente a la ruta y añadimos la función useResource$() de la siguiente manera:
import { component$, useResource$ } from '@builder.io/qwik';
export default component$(() => {
// Año seleccionado
const races = useStore({
year: '2023',
});
// 2 Para cargar el contenido de la función que nos trae la información de la API
const selectYearRacesResource = useResource$<any>(() => {
});
return <>
<h1>Formula 1 - Tabla de resultados { races.year }</h1>
</>
});El resultado actual es el siguiente:
¿En qué consiste la función useResource$()?
Este método nos va a permitir obtener los valores de una función de forma asincrónica. Se llamará a la función asíncrona pasada como su primer argumento cuando se monte el componente y cuando cambien los valores rastreados.
Ahora vamos a trabajar dentro de useResource$(), aplicando la llamada a la API obteniendo los datos necesarios con el año actual:
import { component$, useResource$, useStore} from '@builder.io/qwik';
import { ergastF1ChampionshipRaceListAPI } from '~/api/ergast-f1';
export default component$(() => {
// 1
const races = useStore({
year: '2023',
});
// 2
const selectYearRacesResource = useResource$<any>(({ cleanup }) => {
// 3.- Es buena práctica usar `AbortController` para abortar (cancelar) la obtención de datos si
// llega una nueva solicitud. Creamos un nuevo `AbortController` y registramos una `limpieza` (cleanup)
// función que se llama cuando se vuelve a ejecutar esta función.
const controller = new AbortController();
cleanup(() => controller.abort());
// 4.- Llamar a la función y obtener el resultado
return ergastF1ChampionshipRaceListAPI(races.year, controller);
});
return (
<>
<h1>Formula 1 - Tabla de resultados {races.year}</h1>
<p>AQUÍ DEBEMOS DE PINTAR LA LISTA DE CARRERAS</p>
</>
);
});Y esto es lo que tenemos ahora:
El valor selectYearRacesResource que es el valor que se asigna desde useResource$() tiene estos posibles resultados:
- pending: los datos aún no están disponibles, es decir, mientras está haciendo el proceso de obtener los datos.
- resolved: los datos están disponibles.
- reject: los datos no están disponibles debido a un error o tiempo de espera.
Ahora ya después de usar la función useResource$() y conociendo los posibles estados de las respuesta, debemos de incrustar lo que obtenemos en la vista y esto lo hacemos basándonos en este punto de la documentación. Lo que vamos a añadir es la siguiente estructura:
<Resource
value={
/* VALOR ASIGNADO a la constante desde useResource$() => selectYearRacesResource*/
}
onPending={() => <div>Loading...</div>} // Mientras está ejecutando la carga
onRejected={() => <div>Failed to load race data</div>} // Rechazado
onResolved={(result) => { // Resuelto, donde renderizamos los resultados
return <div>CONTENIDO</div>;
}}
/>Aplicándolo a nuestro proyecto:
// Añadir "Resource"
import { component$, useResource$, useStore, Resource } from '@builder.io/qwik';
...
export default component$(() => {
....
return (
<>
<h1>Formula 1 - Tabla de resultados {races.year}</h1>
<Resource
value={selectYearRacesResource}
onPending={() => <div>Loading...</div>}
onRejected={() => <div>Failed to load race data</div>}
onResolved={(result) => {
return <div>{JSON.stringify(result)}</div>;
}}
/>
</>
);
});Quedando de la siguiente forma, como se puede apreciar ya coge todos los datos de las carreras y lo incrusta como una cadena de texto:
Lo que tenemos que hacer es ponerlo más organizado y más vistoso y esto lo haremos en formato lista:
<Resource
value={selectYearRacesResource}
onPending={() => <div>Loading...</div>}
onRejected={() => <div>Failed to load races</div>}
onResolved={(result:any) => {
return (result.length ?
<ul>
{result.map((race: any) => (
<li>
<a href={race.url} target='_blank'>
{race.raceName}
</a> ({ race.date})
</li>
))}
</ul> : <p>Sin resultados - Comprueba que el año seleccionado está entre 1950 y {new Date().getFullYear()} (incluido)</p>
);
}}
/>El resultado seleccionando el año 2023:
Si seleccionamos un año fuera del rango 1950–2023 (estos años están incluidos, si te encuentras en años posteriores el rango se amplia, por ejemplo si es 2025, sería 1950–2025), por ejemplo 1940 este debería de ser el resultado:
Añadiendo un selector de años mediante un input de tipo numérico.
Podemos hacer que las llamadas a la API se realicen en base a la selección del año usando un input numérico, así, sin cargar podríamos ir seleccionando los datos de diferentes años sin tener que refrescar la página completamente.
Vamos a aplicar unos cuantos cambios.
Añadimos el campo de entrada numérica con el mínimo valor de 1950 y el máximo el año actual (ahora 2023, pero quizás estés leyendo este artículo en el 2024) usado la clase Date con la función para obtener el año actual:
import { component$, Resource, useResource$, useStore } from '@builder.io/qwik';
import { ergastF1ChampionshipRaceListAPI } from '~/api/ergast-f1';
export default component$(() => {
...
const selectYearRacesResource = useResource$<any>(({ track, cleanup }) => {
...
});
return (
<>
<h1>Formula 1 - Tabla de resultados {races.year}</h1>
<span>
Año:
<input
type='number'
min='1950'
max={ new Date().getFullYear() }
value={races.year}
onInput$={(ev) =>
(races.year = (ev.target as HTMLInputElement).value)
}
/>
</span>
...
</>
);
});Si cargamos los cambios tendremos lo siguiente:
Si hacemos cambios en el campo numérico (1), SOLO modifica el valor en el título y esto es porque no estamos escuchando los cambios que está sufriendo el valor races en la propiedad year y por lo tanto NO hace más llamadas a la API, dejando desactualizado (2) la lista de carreras por año seleccionado:
Para obtener esta actualización, reaccionando al cambio de año usaremos la función track, que en un próximo artículo, hablaré con más detalle.
Básicamente lo que hace es esperar cambios del valor de una propiedad. Lo aplicamos dentro del useResource$() y nos ponemos a escuchar el valor de la propiedad year dentro de races:
...
export default component$(() => {
...
const selectYearRacesResource = useResource$<any>(({ track, cleanup }) => {
// Observar cambios en el año con track para ejecutar la búsqueda con el nuevo valor
track(() => races.year); // <=======================
...
return ergastF1ChampionshipRaceListAPI(races.year, controller);
});
return (
<>
...
</>
);
});Refrescamos y empezamos a cambiar los años, por ejemplo de 1950 a 1951.
Con 1950 este es resultado:
Con 1951 este es el resultado:
Como se puede apreciar, ya está actualizando la lista en base a nuestra selección, ¡Bien! Esto ya marcha.
Si añadimos un valor como 12, debe de dar error:
Con 1920 como está mandando una cadena de texto de 4 de longitud, lo coge bien sin error. En cambio, con 12, cuya longitud como NO es igual a 4, da error. Observemos con 1920 lo que nos muestra:
Llegados a este punto ya hemos trabajado con la forma de consumir APIs REST usando el elemento Resource. Ahora vamos a comenzar con el apartado de la API de GraphQL, desde el navegador mediante el uso del playground.
Os dejo el código de lo trabajado hasta este punto:
Consumiendo API GraphQL desde el navegador
Después de haber completado la manera de consumir una API REST paso a paso, vamos a realizar el mismo proceso con las APIs GraphQL, que prácticamente es lo mismo pero a la hora de hacer la llamada usaremos el verbo POST siempre.
Antes de entrar en detalles, vamos a trabajar con la siguiente API donde podemos obtener información de países del mundo:
https://countries.trevorblades.com/
Si no habéis trabajado nunca con GraphQL, os animo que si tenéis interés, toméis este curso GRATUITO impartido por mi en el que para obtener unos conocimientos básicos de como se trabaja en el Playground, lo haremos con la sección “Trabajando en la Interfaz GrahQL Playground — Un GraphiQL mejorado”:
https://www.udemy.com/course/introduccion-a-graphql-desde-las-bases-hasta-crear-apis/
Una vez que accedemos, tenemos la siguiente apariencia, el Playground donde vamos a realizar las diferentes consultas para obtener la información exacta que necesitemos.
Teniendo como referencia la documentación Docs voy a obtener dos consultas, por un lado la lista de continentes que es una consulta simple y por otro, una consulta un poco más compleja donde trabajamos con los Query Variables para aplicar filtros y obtener los paises de Europa.
Esto como se hace no lo voy a explicar, ya está explicado en el curso que os he adjuntado.
Primera consulta — Lista de continentes
Consulta simple en el que usamos el resolver continents para obtener la lista de todos los continentes existentes, donde nos interesa obtener el code de Europa para la segunda consulta.
Ahí tenemos la consulta a la izquierda y a la derecha su resultado. He hecho lo más simple posible para que obtenga el código que usaré en la siguiente consulta junto con el nombre del continente.
Lo que tendríamos que tener en cuenta es lo siguiente:
- Endpoint: https://countries.trevorblades.com/
body: Dentro de la propiedadqueryenviamos el contenido de la consulta que sería lo que corresponde a esto:
{
continents {
code
name
}
}Segunda consulta — Obtener todos los países de Europa
Ahora que ya sabemos que podemos filtrar Europa con el código “EUR” vamos a aplicar la siguiente consulta en el que ya estamos metiendo otro elemento, el uso de Query Variables, que son las variables que usaremos para poder hacer consultas dinámicas:
- 1: Consulta donde ya hacemos uso del filtro añadiendo los argumentos con los Query Variables.
- 2: El filtro para obtener los paises de Europa mediante el uso de
Query Variables. - 3: Resulta aplicando correctamente el filtro para obtener solo los paises de Europa.
Llegados a este punto, vemos dos maneras de realizar diferentes tipos de consultas, la primera super sencilla, sin uso de Query Variables y la segunda ya algo más compleja con valores para filtrar los resultados.
Es importante que sepáis trabajar con la documentación de las APIs, ahí está toda la clave.
Con esto, terminamos este apartado y usando estos ejemplos, vamos a montar nuestra página para obtener la lista de los paises en base a nuestra selección de continente.
Consumiendo API GraphQL en Qwik
Para consumir una API de GraphQL siempre necesitamos hacer las llamadas de tipo POST. Lo que necesitamos mínimo es lo siguiente:
- Endpoint.
- La información de la consulta (query — NECESARIO) y sus filtros, las
Query Variables(variables — opcional)
Teniendo en cuenta lo siguiente, montamos la función para poder realizar las operaciones con una API de GraphQL.
Basándonos en lo visto con la API REST, usando su base, dejamos la función de la siguiente forma creando un nuevo fichero dentro del directorio api llamando al fichero countries-data.ts:
// 0 - Fichero alojado en: src/api/countries-data.ts
// 1.- Endpoint principal
const API_URL_GRAPHQL = 'https://countries.trevorblades.com/';
// 2.- Función donde se realizan la consultas
export const countriesGraphQLAPI = async (
body: { query: string; variables?: string }, // 3.- Consultas obligatorias + filtros
controller?: AbortController
): Promise<Array<any>> => {
// 4.- Realizamos la llamada fetch con POST pasándole siempre el body con mínimo la "query" (consulta)
const resp = await fetch(API_URL_GRAPHQL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
signal: controller?.signal,
});
console.log('FETCH resolved');
// 5.- Extraemos la propiedad data, que siempre es el valor principal que tenemos en común
const { data } = await resp.json();
console.log(data);
return data || Promise.reject(data);
};Teniendo la función definida, lo que nos hace falta es consumirla desde la parte frontal, donde se visualizarán los datos.
Basándonos en los anterior, creamos una nueva ruta y tenemos el siguiente contenido inicial:
import { component$, useResource$ } from '@builder.io/qwik';
import { countriesGraphQLAPI } from '~/api/countries-data';
export default component$(() => {
const continentsListResource = useResource$<any>(({ cleanup }) => {
const controller = new AbortController();
cleanup(() => controller.abort());
// Llamada a la función pasando únicamente la consulta en "query"
return countriesGraphQLAPI(
{
query: `
{
continents {
code
name
}
}
`,
},
controller
);
});
return (
<>
<h1>Countries</h1>
</>
);
});Y su resultado será lo siguiente:
¿Por qué no se ve nada? Simple, porque no estamos añadiendo el elemento <Resource/> pero tranquilidad, que hemos puesto un console.log para observar si coge bien la información. Si vamos a la consola donde ejecutamos el proyecto (desde el servidor), podremos ver que está realizando correctamente la consulta:
Estaría bien que en este mismo instante, intentéis plasmar esta información en la parte frontal sin seguir leyendo. Así lo que conseguiremos es ir asimilando e interiorizando estos conceptos.
Objetivo, conseguir algo como lo siguiente:
¡Ánimo!
El resultado lo dejo aquí
Opciones de selección de continentes para cargar dinámicamente paises
Ahora ya tenemos los continentes a mano, solo nos queda generar dinámicamente los botones asociados a los continentes, para que cuando hagamos click, podamos cargar los paises que corresponden a ese continente, algo como lo realizado con Europa en las consultas pero con opción a poder visualizar con cualquier continente.
Cambiamos el código a lo siguiente:
import { component$, Resource, useResource$, useSignal } from '@builder.io/qwik';
import { countriesGraphQLAPI } from '~/api/countries-data';
export default component$(() => {
// 1.- Se almacenará el código del continente
const selectContinent = useSignal('');
const continentsListResource = useResource$<any>(({ cleanup }) => {
... (Sin cambios)
});
// 2.- Cambiamos de lista a botones
return (
<>
<h1>Countries</h1>
<p>Seleccione el continente: {selectContinent.value === '' ? 'Seleccione uno por favor' : selectContinent.value}</p>
<hr/>
<Resource
value={continentsListResource}
onPending={() => <div>Loading...</div>}
onRejected={() => <div>Failed to load continents list data</div>}
onResolved={({ continents }) => {
return continents.length ? (
<div>
{continents.map((continent: any) => (
<button>
{continent.name}
</button>
))}
</div>
) : (
<p>Sin resultados</p>
);
}}
/>
</>
);
});Y su resultado será el siguiente:
Añadimos la acción de click en los botones (dentro de <Resource/>), para que actualice la información del continente seleccionado:
...
<div>
{continents.map((continent: any) => (
<button onClick$={() => selectContinent.value = continent.code}>
{continent.name}
</button>
))}
</div>
...Cuyo resultado será el siguiente, en este caso pulsamos en Europa (Probad otras opciones):
Llegados a este punto ya tenemos el primer apartado realizado, lo que nos queda es añadir otro <Resource/>para lo que es la lista de paises de un continente seleccionado. Añadimos el siguiente código para obtener la información basándonos en lo visto en la segunda consulta que hemos hecho antes que era lo siguiente (ahora está filtrando paises de Norte América):
Lo aplicamos al código, para que coja el valor del continente en base a nuestra selección:
import {
component$,
Resource,
useResource$,
useSignal,
} from '@builder.io/qwik';
import { countriesGraphQLAPI } from '~/api/countries-data';
export default component$(() => {
...
const countriesByContinentListResource = useResource$<any>(({ track, cleanup }) => {
// 1.- Observamos los cambios del continente seleccionado
track(() => selectContinent.value);
const controller = new AbortController();
cleanup(() => controller.abort());
// 2.- Consulta para obtener el lista de paises por continente seleccionado
return countriesGraphQLAPI(
{
query: `
query getCountriesByContinent($filter: CountryFilterInput){
countries(filter: $filter) {
name
capital
currency
phone
continent {
name
}
}
}
`,
variables: `
{
"filter": {
"continent": {
"eq": "${selectContinent.value}"
}
}
}
`
},
controller
);
});
return (
...
});Y ahora vamos a probarlo. Al cargar hace lo siguiente (en la consola de ejecución de los eventos del servidor):
Obtenemos la lista de continentes y como no hay ninguno seleccionado, no tenemos paises. Es correcto.
Ahora si selecciono Europa, esto es lo que pasaría (en el navegador).
Ahora recordad cualquier cambio se visualizará el log dentro de la consola del navegador ya que está todo listo en el navegador y cualquier evento de cambio en los valores del estado hará que se ejecute en el navegador y no en el servidor como en la primera carga.
Probad con otros continentes para ver resultados, a ver si funciona con coherencia.
África
Oceania
(Probad todos vosotros si tenéis curiosidad, el funcionamiento es correcto)
Pintar los resultados de los paises en formato lista
Lo más difícil está hecho, lo que falta es reflejar esos resultados en una forma de lista como las carreras de formula 1 de un año seleccionado. Solo sería copiar y adaptarlo a las necesidades actuales.
Añadimos dentro del código JSX debajo de los botones de selección lo siguiente:
import {
component$,
Resource,
useResource$,
useSignal,
} from '@builder.io/qwik';
import { countriesGraphQLAPI } from '~/api/countries-data';
export default component$(() => {
...
return (
<>
...
<hr/>
<Resource
value={countriesByContinentListResource}
onPending={() => <div>Loading...</div>}
onRejected={() => <div>Failed to load countries list data</div>}
onResolved={({countries}) => {
return (countries.length ?
<ul>
{countries.map((country: any) => (
<li>
{country.name}
</li>
))}
</ul> : <p>Sin resultados</p>
);
}}
/>
</>
);
});Y el resultado se refleja de la siguiente forma, en este caso de manera inicial:
Seleccionando Europa:
Llegados a este punto ya hemos aprendido a hacer consultas a APIs REST como APIs GraphQL y con esto, el código final os lo dejo a continuación:
Conclusión
Llegados a este punto hemos aprendido como consumir APIs REST y GraphQL con Qwik.
Hemos visto un concepto nuevo como el uso de useResource$() aparte de haber repasado un montón de conceptos vistos en los anteriores artículos.
Llevamos aprendido muchísimo, os animo a que repaséis si hiciese falta.
Me gustaría que en los comentarios dejaseis resultados de cosas que vayáis practicando, ya que cuanta más variedad, todo el mundo nos beneficiamos de ello.
Finalizamos el artículo y en el siguiente os voy a enseñar como trabajar con los ciclos de vida de los componentes dentro de un proyecto de Qwik.
Todos los artículos publicados del curso los encontraréis en la siguiente lista que iré actualizando semanalmente y estableciendo el orden natural recomendado:
Todo lo que hemos trabajado lo podéis encontrar en el siguiente repositorio con el resultado en código:
Presencia en redes sociales
Podéis encontrarme en las siguientes redes.
