Cargadores de datos: Mejorando la obtención de datos en Vue

Hola, soy Eduardo, soy miembro del equipo central de Vue.js, trabajo como desarrollador front-end independiente y soy el autor de uRouter y Pina, entre otras bibliotecas, y puedes encontrarme en persona en París en algunos de los encuentros o en línea como Pozva.

Y hoy quiero hablarles sobre un tema que me es muy querido porque está relacionado con el enrutador, que son los data loaders. Esto es mucho más que simplemente obtener datos, pero creo que obtener datos será el caso de uso más común para esta característica.

Y actualmente, si estás interesado o deseas aprender todos los detalles técnicos sobre esta característica, ya puedes hacerlo leyendo el RFC. Incluso tengo un sitio web para ello. Pero como puedes ver, esto es bastante largo. Realmente cubre todos los detalles técnicos que se me ocurrieron. Hay realmente mucho, pero cubre más de lo que incluso cubriría la documentation porque también cubre algunos casos especiales. Por supuesto, esto es un poco aburrido de explicar, así que mi objetivo hoy es mostrarte cómo usarlo y evitar que tengas que leer todo el RFC. Por supuesto, no podré entrar en todos los detalles de la implementación de los data loaders, pero aún te mostraré qué problema estamos resolviendo y cómo lo estamos resolviendo.

El problema que estamos resolviendo es la obtención de datos, que es difícil. Hay muchas formas de hacerlo, y te mostraré algunas formas de hacerlo. Tenemos un contenedor inicial de datos que vamos a llenar con los datos que queremos. Tenemos una referencia, y luego podemos llamar a una API en el montaje si queremos una forma en la que vamos a obtener datos y luego podemos mostrarlos. Pero a veces también queremos actualizar según la fila, como un ID en los parámetros. Entonces movemos eso a un observador, observamos los parámetros y luego volvemos a obtener los datos. Luego, lo que podríamos pensar es, bueno, todavía necesitamos manejar el estado de carga porque inicialmente los datos están vacíos, así que podría querer mostrar algún estado de carga. Agregamos eso y luego tenemos que alternar ese estado de carga entre verdadero y falso. Y luego pensamos, oh, espera, pero tal vez haya un error, así que también tengo que manejar eso. Entonces tienes un error, que nuevamente es otra referencia, y también manejas el error, y luego actualizas la plantilla.

Ahora, como puedes imaginar y probablemente experimentar, esto se vuelve muy repetitivo. Y debido a que es algo tan común en las aplicaciones, terminas repitiéndolo mucho. Por lo general, lo abstraes en un componible, e incluso puedes usar componibles existentes. Por ejemplo, podrías usar una consulta de vista de la pila de tareas, y así tienes solo cuatro líneas para lo que estamos haciendo en 20 o tal vez 15 líneas. Y esto es realmente bueno porque también ofrece todas las características como caché, a costa de una biblioteca más pesada, por supuesto, pero se separa de la capa de rutas. Por lo tanto, ya no se integra en la navegación. Y como resultado, tenemos una obtención de datos más independiente, que tiene sus propios beneficios, pero también algunas inconveniencias. Entonces, los data loaders están aquí para cerrar la brecha. Y por lo tanto, los objetivos de los data loaders son integrarse con el ciclo de navegación, por lo que se bloquearán o no. Puedes elegir lo que quieras.

La navegación hasta que todos los data estén listos puede cambiar o abortar la navegación. Por ejemplo, en un guardia de navegación, puedes devolver falso para abortar la navegación. Por lo tanto, se bloqueará o no. Puede cambiar o abortar la navegación. Por ejemplo, en un guardia de navegación, puedes devolver falso para abortar la navegación. O puede cambiar o abortar la navegación. Por ejemplo, en un guardia de navegación, puedes devolver falso para abortar la navegación. También podrías hacer eso.

Los data loaders deduplican todas las solicitudes y el acceso a los data. Esto significa que todas las solicitudes se realizarán en paralelo y siempre habrá solo una instancia de una de las solicitudes en curso. Y luego tenemos una obtención secuencial semántica. Esto significa que, de forma predeterminada, las cosas son paralelas, pero si queremos, podemos hacer algunas obtenciones secuenciales. Y también queremos retrasar todas las actualizaciones hasta que se resuelvan todos los data loaders.

Esto significa que en aplicaciones complejas, es posible que tengamos data que se resuelva desde diferentes puntos finales de API. Y en nuestra página, es posible que mostremos eso en diferentes partes de la aplicación. Y así, algunas de las API pueden ser más rápidas que otras y algunas pueden resolverse más rápido que otras. Y no queremos mostrar los nuevos data hasta que todo se haya completado, porque de lo contrario, vamos a mostrar una página antigua con los nuevos data. Y también queremos deshacer los cambios. Por lo tanto, queremos evitar establecer los nuevos data si algo falla, porque al final, estamos en una navegación. Así que nos quedamos en la página antigua. Queremos actualizar los data.

Para darte una idea de cómo se ve esta API, tenemos dos scripts. Y sé que pensarás, ¿por qué querría agregar otro script? Hay una razón para esto. No podemos poner todo en el script setup, porque las cosas que colocas dentro del script setup están dentro de la función de configuración del componente. Por lo tanto, no se exponen de la misma manera fuera de ella. No se comparten entre las instancias de los componentes. Y también ocurren cuando se monta el componente. Están dentro de la función de configuración, por lo que debes montar el componente para acceder a eso. Por lo tanto, el script regular nos da acceso a propiedades estáticas que no están relacionadas con el montaje del componente. Ahí es donde vamos a definir el loader.

Y como puedes ver, estoy usando define loader, pero no estoy importando esa función en ningún lugar. Esto se debe a que esto es solo una especie de code. No hay un solo define loader. Puedes tener muchos define loaders, y la idea es que hay muchas implementaciones de loaders que contienen diferentes características. Por ejemplo, el básico, que es obtener cada vez, y luego tenemos otro, que es un poco más complejo y tiene almacenamiento en caché. Y luego puedes implementar otros loaders que se integren con GraphQL, Vue query, Vue Fire, cualquier cosa. Y así, la idea de estos loaders es que su API puede ser diferente, pero lo que devuelven siempre es lo mismo. Y al final, siempre tenemos acceso a los data, a la propiedad de carga y al error, y una función de recarga que nos permite activar manualmente una nueva obtención.

Ahora, por supuesto, el composable es responsable de si debe obtener nuevos datos o no, eso depende del composable, lo cual es bastante bueno, pero esta es la API base, y todas las implementaciones pueden agregar lo que quieran. Pueden agregar más cosas. Ahora es el momento de mostrarte algo de code real. Tengo esta aplicación en ejecución. Se comunica con una API pública, que es el Instituto de Arte de Chicago. Así que es todo arte. Puedes buscar. Puedes buscar al artista y muchas otras cosas. Está bien documentado. Y lo que voy a mostrarte es cómo migrar esta aplicación para usar los loaders.

El primer paso, lo que debemos hacer es instalar el desenchufado de Vue router. Ahora, por supuesto, aquí ya lo tengo instalado. Está aquí mismo, pero aún así te mostraré cómo usarlo. Entonces, necesitamos agregarlo a la VConfig. Está aquí. Podemos configurarlo si queremos. Esto nos dará dos cosas. Nos dará enrutamiento basado en archivos. Aquí puedes ver que tienes una carpeta de páginas con dos archivos, index y search, y aquí tenemos el enrutador, y no estoy declarando ninguna ruta. Se detectan automáticamente. Y también estoy usando Vue router auto, que es ajustado. Así que todas las rutas que vemos serán ajustadas.

Si intento tomar la ubicación actual y verificar el nombre, puedo ver que también está ajustado. Así que esto es bastante bueno. Me brinda algunas características adicionales que voy a ver.

Luego, en el archivo principal, debes instalar algunos de los complementos de data loader. Esto agregará una guarda de navegación que maneja toda la obtención de datos, toda la carga de datos, lo siento. Y en este momento, lo que tengo es solo una obtención desmontada antigua y regular. Así que no solo tengo una paginación que no funciona, como puedes ver aquí, tenemos muchas páginas, pero ninguna de ellas se puede ver, solo la primera. Así que quiero refactorizar esto para usar los data loaders. ¿Cómo lo hacemos?

Voy a comenzar agregando otro script. Entonces, me muevo aquí arriba, agrego el script, mismo lenguaje. Y voy a definir un loader básico. Así que veremos más adelante que tenemos diferentes tipos de loaders. Y aquí podemos pasar la función que vi antes, pero también podemos pasar la ruta. Ahora, esto es un tipo de ruta. Por lo tanto, nos permite decir que este loader se debe ejecutar en estas rutas. Y esto va a forzar el tipo de la ubicación, también. Por lo tanto, tenemos todos los parámetros disponibles. En este caso, ninguno. Por lo tanto, no usamos nada que no podamos usar.

Entonces, aquí estoy en el índice, y voy a usar sync para, aunque aún no voy a usar to todavía. Y aquí voy a devolver lo que tengo aquí, getHardwareList. Y así he definido el loader, pero lo que necesito hacer es exponerlo. Por lo tanto, necesito decirle al enrutador: `oye, este loader está adjunto a esta página`. Entonces, aquí estoy en un componente que se agrega a una de las rutas. Esto es lo que llamamos una página. Entonces, lo que necesito hacer es exportarlo, y le voy a dar un nombre como un composable porque nos va a dar un composable. Voy a llamarlo useHardwareList. Y así estoy haciendo dos cosas. Estoy definiendo useHardwareList, que me dará acceso al composable aquí. Y también, al exportarlo, le estoy diciendo al enrutador: `oye, debes cargar este loader`.

Entonces, aquí, en lugar de tener esto, voy a usar RWorkList. Y ahora obtengo los data, y puedo hacer RWorkList. Ahora tengo todas las propiedades. Tengo misloading, reload y error, que usaré más adelante. Pero por ahora me detendré aquí.

Bien, veamos. Y ahora tenemos, si recargo la página, puedo ver, puedes ver que en la parte superior, tengo esta pequeña barra de carga que aparece mientras navegamos. Y como puedes ver, está tardando un poco porque esta API, estoy solicitando a propósito demasiadas cosas, por lo que va un poco lento. Pero se integra en el ciclo de navegación. Y ahora podemos cambiar las páginas. Por ejemplo, aquí puedes ver que estamos navegando a una página diferente, y está tardando un poco, pero el contenido no cambia. Esto se debe a que no estamos pasando la página aquí. Entonces, esta función me permite dar una página, que haré aquí. Y voy a usar el par, tengo una función auxiliar aquí para analizar una página en la consulta aquí. Ahora, por cierto, puedes mover esto hacia arriba o no, no importa realmente, Vue lo maneja de todos modos.

Al hacer eso, ahora tengo acceso a las diferentes páginas. Ahora creo que HMR probablemente esté roto aquí, pero debería poder navegar a través de las diferentes versiones. Ahora, como puedes ver, cada vez que hago clic en uno de los enlaces, se vuelve a cargar cada vez que hace una nueva obtención de datos.

De acuerdo. Esto es algo que podemos mejorar más adelante. Ahora, aunque tenemos el estado de carga que aparece en la parte superior, también podemos manejarlo localmente. Así que podemos hacer una carga suave aquí y mostrar un error si queremos, y podemos agregarlo, por ejemplo, aquí. Así que voy a agregar una carga suave. Y aquí voy a tener el error, si hay alguno. No podré ver el error porque no lo estoy manejando en este momento. Si tenemos un error, de todos modos vamos a cancelar la navegación. Pero podemos ver la carga que aparece cuando cargamos una página u otra. Y también podemos ver que la información forma parte de la ruta. Así que si recargamos la página, puedes ver que terminamos en la misma página de resultados.

Muy bien. Ahora tengo otro que es un poco más interesante, que es la búsqueda. La búsqueda es más interesante porque no contiene toda la información. Así que cuando hago una búsqueda, lo que voy a obtener es solo un array con el título, pero luego no tengo la imagen del arte. Solo tengo una imagen de baja calidad. Es como una imagen muy, muy pequeña, muy, muy diminuta que parece que tiene cinco, 12 píxeles o algo así. Es realmente pequeña. Y la idea es que vamos a hacer todas las solicitudes para obtener todas las imágenes, y luego las vamos a intercambiar. Así que simplemente nos desvaneceremos en las nuevas imágenes. Por ejemplo, aquí puedo buscar cosas que no van a funcionar. Se agregarán a la consulta, pero no se utilizan. Y solo se utilizan si recargo la página. Permíteme mostrarte el code. Tenemos el mismo code exacto que antes. Tenemos el desmontado, y simplemente hacemos la búsqueda de arte. Así que nos vamos a mover aquí y agregar otro script. Y igual que antes, usamos artwork. Y igual que antes, hacemos uso de artwork, search results. Y vamos a definir un cargador básico, esta vez en la búsqueda.

Y aquí vamos a utilizar otra función que tenemos, que es la búsqueda de obras de arte. Ahora esta función espera dos argumentos. El primero va a ser una consulta. Así que esto va a ser un texto plano, una búsqueda de texto completo. Creo que así es como lo llamamos. Y luego tenemos la página y el límite. Ahora voy a establecer el límite un poco más alto. Tal vez 20. Y luego necesito pasar estos dos parámetros.

Como puedes ver, ya he conectado los parámetros a la ruta con algunos componibles. Y lo que necesito es recuperarlos aquí y pasarlos. También tengo algunos ayudantes, búsqueda de consulta, que van a validar los parámetros. Solo estoy usando el mismo nombre aquí y aquí. Página igual a analizar consulta, consulta de página. Así que esto va a ser do.query.page, igual que aquí.

Ahora, aquí está la parte interesante. Si no tengo una consulta válida, lo cual en este caso puede suceder si pasamos un array. O si manualmente tenemos aquí, y q igual a otro. Así que esto va a ser un array en la consulta, así es como definimos los arrays. Queremos cambiar la navegación para poder abortarla. Y podemos hacerlo devolviendo o lanzando ambas palabras a través de un resultado de navegación.

Y aquí podemos pasar el resultado de navegación que queremos pasar. Por ejemplo, false, que es lo mismo que devolver false en el guardia de navegación. Y esto va a cancelar, simplemente abortar la navegación. Y al lanzar, estamos diciendo, okay, nos detuvimos aquí. No necesitamos esperar por nada más. Y también va a hacer que la escritura de amigos funcione un poco mejor.

Muy bien, algo de reformateo aquí. Y ahora necesito usarlo. Así que aquí, voy a eliminar esto y esto. Y voy a usar los resultados de búsqueda, data resultados de búsqueda. Creo que así es como lo llamamos. Y voy a usar el error y isLoading como antes. Y ahora, volvamos a la página de inicio. Recarguemos la página por si acaso. De acuerdo, búsqueda. Y así tengo esta búsqueda aquí. Y podemos intentarlo de nuevo, otra búsqueda, a ver si funciona. Como puedes ver aquí, la navegación solo ocurrió una vez que los data estuvieron listos, lo que significa que la página se renderiza solo cuando tenemos todos los data listos para aparecer, excepto que no exactamente correcto, porque no tenemos todas las imágenes.

Ahora vamos a manejar las imágenes. ¿Cómo funcionan las imágenes aquí? Solo tenemos el ID de la obra de arte, lo que significa que necesitamos hacer otra solicitud, otra llamada a la API para obtener todas las imágenes. Así que voy a agregar otro artworkImages. Y voy a usar el cargador básico definido nuevamente, búsqueda, y nuevamente. Ahí vamos. No creo que necesite los dos.

Ahora aquí está la cosa. Necesito dentro de este cargador, el resultado de ese otro cargador. Así que lo que puedo hacer es recuperar todos los resultados aquí, y puedo esperarlos usando el mismo componible. Ahora este uso es muy diferente al que tenemos a continuación, porque aquí no estamos esperándolo, y estamos extrayendo múltiples referencias. Aquí solo tenemos acceso al data plano. Solo tenemos acceso al contenido de ese otro valor.

Así que es un poco más complicado que eso detrás de escena, porque estos valores pueden ser diferentes de lo que tenemos aquí, dependiendo del tiempo. Dado que todavía estamos en la navegación y no se ha resuelto cada cargador, no tenemos todo ya conectado. Esto nos permite tener una carga de datos consistente.

Ahora lo que necesito hacer es recuperar todas las URL, y convenientemente ya agregué una llamada a la API para eso. Así que voy a esperar aquí, obtener la URL de las imágenes de las obras de arte, y aquí podemos tener una búsqueda, resultados.data.map, y voy a hacer artwork, y creo que es solo el ID. Así que ahora lo que voy a hacer es poner esto en un mapa. Realmente no necesito que sea un mapa. Podría ser muchas cosas. Solo va a ser simple de esta manera en este caso de uso específico. Entonces, imágenes igual a nuevo mapa, y voy a tener el número, que es el ID, y luego la URL. Y luego voy a hacer un for, así que voy a iterar sobre todas las URL, y voy a establecer el mapa. Así que image.id, image.imageURL, y luego voy a devolver las imágenes. Oh sí, pueden ser nulas. Por cierto, no todas las obras de arte tienen una imagen. Por eso no funciona. Así que si hago esto, significa que estoy esperando a que todas las imágenes estén listas para aparecer. Y ahora mismo, también necesito agregarlas aquí, porque solo estoy mostrando la miniatura. Así que voy a descomentar esto, lo que me permite acceder a las imágenes, que es este mapa que acabo de crear. Aún no he usado el Composable. Así que lo voy a usar aquí, y voy a decir imágenes. ¿Acabo de nombrarlo imágenes? Sí, lo hice. Y ahora, si recargo la página, puedo ver que tan pronto como ingreso a la página, todas las imágenes están listas, y la transición ocurre de inmediato, porque hay una CSS animation.

¿Qué pasa si no queremos esperar a que todo este conjunto de imágenes esté allí antes de navegar? Podemos hacer eso configurando el cargador como lazy. Esto es similar al lazy que conoces en Nuxt, si has usado Nuxt. También podemos configurar otras opciones. Así que tenemos commit, key server. Depende. Por ejemplo, no quiero que esto espere en el servidor, así que puedo decir false. Y eso significa que en el servidor, si estamos haciendo NSR, este cargador simplemente no se ejecutará en absoluto. Ahora, al ser lazy, significa que estamos ejecutando el cargador tan pronto como podemos, pero no lo estamos esperando.

Entonces, aquí, si voy a una página diferente, lleva algo de tiempo adicional, como puedes ver, obtener todas las imágenes aquí. Esto se debe a que todavía estamos haciendo la otra solicitud. Puedes verlo aquí al lado. Terminamos y luego tenemos la segunda solicitud en curso, pero la página ya se muestra. Mientras que si lo tengo en falso, voy a recargar la página. Puedes ver que ocurre el primero, luego el segundo y luego navegamos. Es un poco más rápido. Uno, dos, tres. Pero así es como funciona. Entonces, en este caso, prefiero tenerlo perezoso.

Hay muchas otras formas de manejar esto, por cierto. No necesitamos hacer un cargador específicamente. Pero me permite mostrarte que podemos tener carga secuencial si queremos a pedido. Puede ser perezoso. Se puede evitar en el servidor. Es altamente configurable. Muy bien. Todavía hay una cosa molesta aquí, en mi opinión. Es que cada vez que hago clic en siguiente, tengo que esperar. Tengo que esperar a que venga y vaya la API. Pero acabo de hacer la llamada, así que podría cachear esto. Podría ser más rápido. Así que te voy a mostrar otro cargador.

Este otro cargador está basado en Pina Colada. Pina Colada todavía está en fase experimental, pero es la capa que me permite agregar la caché a los cargadores de datos. Entonces, la API va a ser muy similar. Se puede usar por sí mismo. Es similar a la consulta de vista en ese aspecto, pero tiene algunas diferencias fundamentales que me permiten integrarlo mejor en los cargadores de datos. Así que volvamos al índice. Y vamos a cambiar esto a un cargador de colada definido.

Entonces, el cargador Colada no toma una función. En su lugar, toma un objeto. Y este objeto va a ser muy similar, pero necesitamos una consulta. Y también necesito agregar una clave. Permíteme agregar esto por el momento y corregir la sintaxis. Muy bien. Entonces, necesitamos agregar la consulta y también la clave. La clave se utilizará para el caché. Y en este caso, vamos a usar una función porque siempre queremos agregar cualquier parámetro que se utilice en la clave.

Entonces, aquí estarán las palabras de arte. Y luego podemos agregar parámetros. En este caso, será solo la página. Así que voy a duplicar el trabajo aquí de analizar la página. No es gran cosa. Se puede refactorizar, pero debería ser suficiente. Así que solo estoy cambiando el cargador aquí. El resto de la API sigue siendo igual, pero como estamos usando un cargador Colada, tenemos acceso a todas las cosas, como el estado. Tenemos refrescar y recargar. Así que tenemos diferentes funciones, que vamos a usar en otro caché.

Y ahora, solo con cambiar eso, si voy, así que voy a recargar la página de nuevo. Si voy a una página diferente y luego regreso, puedes ver que es muy rápido. Y luego, después de cinco segundos, porque ese es el tiempo de caché predeterminado, se volverá a cargar nuevamente. Así que si cambio eso, por ejemplo, en este caso específico, no creo que necesite hacer solicitudes con mucha frecuencia. Así que puedo decir, oye, el tiempo de espera, ups, no está aquí. Está aquí. El tiempo de espera puede ser, en milisegundos, 60. Eso es una hora. Es un poco largo, pero me permite tener un caché que funcione durante mucho tiempo. Así que puedo retroceder, avanzar. A veces son lentos.

Aquí puedes ver que es instantáneo. Muy bien. Ahora hagamos lo mismo para la búsqueda, que es un poco más complicado.

Muy bien. Volvamos aquí. Cargador Glada, y luego lo mismo que antes. Consulta. Así que aquí. Y la clave, que va a ser muy similar. No vamos a tener palabras, pero aquí vamos a tener la cola, que va a ser la consulta de búsqueda analizada en la cola de consulta, y la página, que va a ser la consulta de página analizada. Y eso es todo.

Así que solo con cambiar eso, ahora recargo la página. Vamos a deshacer la búsqueda. Puedo ver que en el panel de red, no estoy haciendo tantas solicitudes. Entonces, los IDs aquí son para las imágenes y el otro es para la búsqueda. Hay mucho más sobre los cargadores que no tengo tiempo para mostrar. Por ejemplo, el cargador Glada, debido a su implementación, solo se activará si cambia alguna de las propiedades utilizadas de la ruta. Por ejemplo, si tienes un patrón u otra consulta o el hash que cambia, no se va a volver a ejecutar el cargador, lo cual no es el caso del básico. Y todos ellos son probados a través de una suite de pruebas que permite un comportamiento específico común que me permite reutilizarlos y combinarlos como quiera.

Dado que no tengo tiempo para mostrarte más que eso, quiero darte algunos enlaces. Primero está desconectar y redireccionar, el repositorio en GitHub, y la documentation, si quieres ir más allá y comenzar a usar esto. Ten en cuenta que esta API aún es experimental. Hay algunos errores, pero estamos avanzando. Pina Colada dice que aún está en desarrollo, pero prometedor y muy interesante en términos de UX para el usuario final cuando se trata de la obtención de data. Y por último, si tu equipo o empresa está interesado en implementar esto, o adelantarse a los demás al saber qué viene, o tener voz en lo que es más importante implementar, arreglar, etc., contáctame para trabajar juntos como freelance, y siempre buscando oportunidades donde pueda equilibrar mi trabajo de open-source y simplemente la vida. Tengo un enlace. Compartiré las diapositivas más tarde, si puedes hacer clic en el enlace. Eso es todo lo que quería mostrar hoy. Espero que pruebes esta API y comparte los comentarios que tengas, todos los errores, todos los problemas, todas las ideas. Ya tenemos muchos usuarios, así que creo que es genial. Ya tenemos muchos usuarios, pero no creo que muchos estén usando el cargador de data todavía. Gracias y disfruta del resto de la conferencia.