Importancia & Fetch Products

Tal como comentamos en la lección anterior, nuestro componente “HomeView” actualmente incluye toda la data de nuestros productos. Esto funciona muy bien cuando tenemos pocos productos. Sin embargo, si queremos dar soporte a una tienda que tiene miles y miles de productos, eso haría que nuestro componente “HomeView” ocupe mucho espacio y por lo tanto tarde en descargarse. Si un componente de nuestro sitio tarda mucho en descargarse, podría pasar que nuestra página se vea incompleta y el usuario no entienda que es lo que está ocurriendo. Si de pronto “HomeView” no carga nada de esta sección se vería. Toda esta parte no cargaría durante bastante tiempo y eso daría una mala experiencia de usuario. Por eso, lo que generalmente se recomienda es tener una fuente de datos por separado de nuestra aplicación cliente. Cuando digo “aplicación cliente” me refiero a nuestro proyecto de Vue, a nuestro proyecto Frontend. Cuando un usuario visita una página, lo primero que se descarga hemos visto que es el HTML. El HTML incluye código JavaScript, en este caso con Vue, que incluye código CSS con nuestros estilos. Sin embargo, si el código JavaScript incluye data y es mucha data la que se descarga, este código JavaScript va a tardar mucho en descargarse y eso va a afectar al experiencia de usuario, porque es muy posible que una gran parte de nuestro proyecto no se visualice, ya que la data está incluida dentro del archivo de JavaScript y hasta que un archivo no se descargue completamente, el navegador no puede empezar a ejecutarlo. Es por eso que lo recomendable es tener archivos JavaScript ligeros que descarguen la data bajo demanda, que descarguen los datos conforme el usuario navega. Por ejemplo, hemos visto que cuando visitamos la ruta de “Cart” se descarga recién “CartView”. Cuando visitamos la ruta de “Home” se descarga “HomeView”, sin embargo “HomeView” incluye la data de los productos. Lo recomendable sería que “HomeView” haga una petición para obtener los productos a partir de una fuente de datos. Entonces eso es lo que vamos a hacer en esta lección. Vamos a hacer que “HomeView” no incluya la data de los productos, sino que la solicite. ¿De qué manera podemos lograr ello? Primero que todo, vamos a detener aquí nuestro servidor local y vamos a usar “npm run dev” para que vayamos viendo nuestros cambios en el navegador durante el desarrollo. Nos dirigimos a nuestra carpeta “src” y desde aquí vamos a revisar cómo funciona actualmente la importación de nuestros datos. La importación la estamos haciendo desde los stores correspondientes, por ejemplo. “categories” importa a “data” desde un archivo json con esta línea y el “store de products” importa “data” de productos con esta línea. Luego la data importada es usada para definir el estado inicial del store. En ambos casos. Cada vez que nosotros vemos un “import” de esta manera se trata de un import que se va a construir al momento de compilar nuestro proyecto. Así como “product” hace “import” de “productData”. Hemos visto que nuestro componente “HomeView” hace “import” de “productsList” y “productList” hemos visto que hace “import” del “store” de productos. Por eso es que cuando descargamos el componente “HomeView”, éste terminaba incluyendo al componente “productList” y terminaba incluyendo al “sotre” y terminaba incluyendo a la “data” de los productos. Esa es la explicación de por qué el asset de “HomeView” termina incluyendo la data de los productos. Porque estos “import” al final se resuelven y generan un archivo JavaScript conveniente para que el usuario no esté descargando varios archivos, sino más bien uno solo con lo que se necesita. Ahora en cambio vamos a cambiarle la estrategia que tenemos actualmente, el store, importa la data de los productos y a pesar que nosotros vemos la data en un archivo separado, de igual manera se está juntando al momento de compilar y se está descargando todo como parte de un archivo “HomeView”. Si tuviésemos miles de productos, la data de igual manera sería agregada a “HomeView” y toda nuestra vista “home” en general tardaría en descargar. Por eso lo que vamos a hacer ahora es tener la data separada, pero no importarla e incluirla desde el inicio, sino que vamos a hacer un request por separado para descargar la información y finalmente mostrarla. Dicho de otra forma, no vamos a hacer un “import”, sino que más bien vamos a hacer una petición “get” para descargar los datos Cuando el usuario visita nuestra página luego de que ya hemos cargado “HomeView” y luego de que ya estamos mostrando al menos el componente usuario. Entonces la información de los productos empezará vacía. Haremos lo mismo con las categorías. No hay ningún import y la data de las categorías empieza como un arreglo vacío. Si nosotros actualizamos, vemos que no hay “categorías” y vemos que no hay “productos”. Así va a empezar nuestro proyecto porque no se van a tener datos, pero ya estamos mostrando algo. “HomeView” ya está cargando, y una vez que cargue “HomeView” vamos a empezar a descargar la información de los productos. ¿Cómo podemos empezar a descargar datos, luego que un componente ha cargado?, Podemos hacerlo a través de un “hook”. Vamos a usar en este caso el hook “mounted”. Entonces nos vamos a dirigir a “HomeView” y vamos a agregar por aquí un método “mounted”. Vamos a agregar un “console.log” y vamos a imprimir el texto mounted. Para volver a la normalidad vamos a quitar el “throttling” y este check de “disable volcage” que habíamos puesto. Nos dirigimos a la consola y como vemos, tenemos aquí el mensaje de mounted. Si actualizamos una vez que se pinta el componente “HomeView”, aparece este console.log. Entonces aquí nosotros podemos poner nuestra petición y descargar la data. Cuando es más conveniente. Entonces, ¿de qué manera podemos descargar los datos? Los datos tenemos que descargarlos a través de una petición get, pero la petición no la vamos a ubicar en el componente, sino que vamos a definirlo como una acción en nuestro store. Este “HomeView” se va a encargar entonces de cargar la información de los productos. Por ejemplo, vamos a acceder en este caso a el store de productos de esta manera. Vamos a invocar a “useProductsStore” para obtener una referencia del store, y luego desde este “productsStore” vamos a invocar a una acción. Actualmente tenemos acciones como “orderByName”, “selectCategory”, vamos a agregar un nuevo tipo de acción. Una acción que va a descargar data. Lo vamos a llamar “fetchProducts”. “fetchProducts” se va encargar de traer productos a partir de un request. Entonces aquí en nuestro listado de acciones, vamos a agregar “fetchProducts”. No necesitamos ningún argumento en este caso, simplemente vamos a hacer una petición con fetch. Aquí nosotros indicamos cuál es la URL con el recurso que queremos consumir y luego nosotros vamos a parsear la respuesta para obtenerla en formato json y finalmente vamos a imprimir, por ahora a través de un “console.log” la data que estamos recibiendo. Esta función fetch está disponible en JavaScript sin instalar ninguna biblioteca y nos permite hacer una petición get a una URL para obtener datos a partir de ella. En este caso, la URL va a ser un recurso de un archivo json. Podría tratarse de una API. Podría tratarse de un web service. En nuestro caso, queremos simplemente consumir información de un archivo json. Para poder hacer una petición necesitamos que este recurso sea un recurso público. Por lo tanto, en este caso nos conviene desplazar nuestra carpeta “data” a “public”. Anteriormente, cuando hacíamos un “import”, convenía tener data dentro de la carpeta “src” para que esa data no sea pública. Pero ahora, en cambio, queremos lo contrario. Queremos que esté en “public” para poder consultar la data y luego de consultarla, poder mostrarla. Si ponemos la carpeta “data” dentro de “public”, significa que nosotros vamos a poder consultar la ruta “/data/products.json”. Vamos a hacer un request a esta URL. Vamos a leer su contenido y vamos a imprimir la data que recibimos a través de un “console.log”. Entonces, hasta aquí vamos a guardar nuestros cambios para ver qué es lo que ocurre. Actualizamos. Como vemos, está llamando a “mounted” y justo aquí debajo tenemos un “console.log” con la información de los productos. Esta información se está obteniendo a través de un request. Si nos vamos al “Network”, podemos ver todos los request que hace una página. En este caso, vamos a filtrar y vamos a darle clic a la opción que dice “fetch” solamente para ver las peticiones asíncronas que estamos definiendo. En este caso se está haciendo una petición a esta URL nos dice. Esta URL es “/data/products.json”. Cuando nosotros usamos “/data/products.json”. La petición se realiza sobre el mismo dominio en el que nos encontramos. Por eso es que nuestro propio servidor es el que nos está dando acceso a este recurso. Este archivo json contiene la data y nosotros estamos consumiendo la información a través de una petición “get”, luego que hemos obtenido una respuesta, estamos imprimiendo por consola dicha data. Esto funciona luego de recibir la data desde nuestro “servidor” entre comillas. O sea, a partir de este recurso vamos a asignar esta data a nuestro estado. Entonces usamos “this._products=data”. De esta manera, al completar este request, asignaremos la información a nuestro estado y nuestro proyecto tendrá disponible la información de los productos. Vamos entonces a actualizar. En este caso, como vemos, los productos ya se muestran. Sin embargo, este request que solicitan los productos, se inicia luego que ya cargó “HomeView”, no antes. Se inicia cuando “HomeView” invoca al método “mounted”. Esto brinda una mejor experiencia de usuario para conexiones lentas porque solo luego de cargar la base de “HomeView” estamos iniciando la descarga de la data de los productos.

Crea una cuenta y continúa aprendiendo 🚀

Importancia & Fetch Products