Domina TanStack Query: de cero a avanzado [edición 2025]

1. Introducción al curso: Hola, bienvenidos a este curso introducción a Tennis Stack query or react query. Mi nombre es Babak Soy ingeniero de software con alrededor de 13 años de experiencia, y utilicé react en los últimos siete años. Y en este curso, te voy a compartir mis experiencias con Raquery Saltemos a los contenidos y lo que vamos a cubrir en este curso. Y primero, creé algunos repositorios Github para ti. En el primer módulo de introducción, te daré los enlaces y también te voy a contar lo que vamos a cubrir en este curso. En el Módulo dos, vamos a Bootstrap a 22 up. Vamos a configurar un proyecto con TypeScript, y también implementamos un servicio holandés, e implementamos la API entre cliente y servidor Y en el Módulo tres, voy a usar rea query en acción. Entonces primero, compararé rea query con redox y discutiré sobre la solución de gestión patrimonial y cuál es la diferencia Y luego vamos a implementar nuestra primera consulta y nuestra primera mutación. Y luego refactorizaremos y limpiaremos el proyecto para que sea un proyecto listo para la producción Y en Motion four, también te presentaré recursos futuros que podrás aprender después de terminar este curso. Y ¿cuáles son los requisitos de periodo para este curso? Este curso no tiene muchos requisitos de periodo, y los conocimientos básicos de Java script y type script deberían ser suficientes, y también un conocimiento básico de la reacción. Entonces si estás familiarizado con react, el concepto básico, qué es un gancho, qué es JSX, este curso es una buena opción para ti y puedes comenzar con este curso Todo lo demás se cubrirá durante este curso. Así que por favor únase a mí y comencemos este viaje juntos. 2. Comprobar diferentes compromisos: He creado dos repositorios para este proyecto. El primero es RequeryTDApp, y esto está empezando Esta es la aplicación del lado del cliente, y tengo otro repositorio para el servidor. Para cada repositorio, puedes descargarlo manualmente como z fle o clonarlo con el Github Y si vas aquí, verás todos los comentarios que se han hecho a este repositorio. Si quieres seguir conmigo paso a paso, te sugiero que siempre puedes venir y escoger el committage y dentro de tu terminal, puedes ejecutar git log y puedes ver todos los commits que hice para este proyecto Si copia uno de estos compromisos, puede verificar ese comitag ¿qué hace esto? Esto traerá todos los cambios hasta aquí. Para que puedas partir de esto, y luego cada vez que te muestre en el video, puedes hacerlo paso a paso conmigo. Entonces si ejecuto este comando, entonces estoy en el lugar que he estado cuando estaba trabajando en esa parte del código. Y de esta manera, puedes hacer todo conmigo. Y si quieres volver a la última versión, solo vas a echar un vistazo a M. Si estás usando un ID como Web Storm aquí, tienes el ícono de Git. También puedes ver todos los comentarios y todos los cambios aquí y aquí, también puedo hacer revisión de checkout. Lo que esto hace es mi cabeza del Git viene aquí y ahora estoy aquí, puedo comenzar cuando vea el segundo video, puedo comenzar a codificar, y entonces este sería el último paso. Y si solo quiero volver, solo voy a echarle un vistazo. A. Entonces de esta manera, también puedes seguirme conmigo y hacer la codificación. La mejor manera de aprender es haciendo. Por lo que también le sugiero que tome una acción. Y siempre que te empiece a codificar y siempre que estés viendo los videos, por favor también haz la codificación tú mismo para que la aprendas mejor. 3. 04 Instalar react con la aplicación create react: Entonces comencemos instalando react con TypeScript. Voy a usar la aplicación Create React. Se trata de un script que permite instalar fácilmente react sin mucha configuración. Así que vayamos a Google y busquemos Create React app TypeScript Como pueden ver, el primer enlace es el sitio web de la aplicación Create React, y voy a la sección de instalación. Como gestor de dependencias, estoy usando YR, así que voy a copiar este comando y dejarnos ir a la terminal. No tienes si no tienes hilo, puedes instalarlo fácilmente con este PML GR común A nivel mundial instalará hilo a través del NPM. Y como vienes conmigo a través de este tutorial, si quieres estar seguro de que todas las cosas funcionan exactamente igual que en mi sistema, puedes ejecutar este comando, no la versión dash dash. Entonces estoy usando la versión 22.14 0.0. Técnicamente, cualquier versión superior a esta versión debería funcionar. Pero si quieres exactamente asegurarte, y también te recomiendo usar exactamente la misma versión. Entonces si me enfrento a algún error, también te mostraré cómo resolver este error y puedes venir conmigo paso a paso sin tener ningún problema. Y la herramienta que estoy usando para instalar diferentes versiones de No JS es NVM Puedes instalar fácilmente cualquier versión que quieras con NVM instalado Y luego tengo esta versión. Y porque ya la tengo, dice que esta versión ya está instalada, y luego puedes usar esta versión con este comando NPM usado. Bien. Entonces comencemos y luego usaré este comando que he copiado. Como puedes ver dice Yarn create react app. Lo llamaré como una app para hacer, y la plantilla será mecanografiada Entonces comienza a instalar y descargar las dependencias que se requieren para que react se ejecute, y tomará algún tiempo por primera vez, y esperemos hasta que termine la instalación, los paquetes requeridos y dependencias Bien, perfecto. Entonces la instalación se ha terminado dentro de mi terminal, verán que tengo algunos comandos, Yarn start que inicia el servidor de desarrollo, yarn build, que agrupa la app para la producción, Yarn test que ejecuta la prueba y yarn eject, que elimina las herramientas que se ha creado con create reactor Entonces vayamos a la app, y aquí, veamos qué carpetas tengo. Entonces no tengo mi ****, mi paquete punto JS en SRC público, el archivo de configuración TypeScript y Voy a comenzar mi proyecto con Yarn Start, y me pidió que le permitiera acceder al puerto y perfecto. Como puede ver, ahora reaccionar está funcionando y funcionando. 4. 05 crear página todo: Entonces en este tiempo, agregué algo de codificación para que el proyecto se vea como una app de todo. Veamos qué le he agregado al proyecto. Entonces lo primero que agregué, agregué un encabezado a la Navbar como Navbar de la aplicación, y tenemos la app Todo Tenemos una entrada meno para la lista y tenemos una página de crear Todo. Y para ello, he utilizado la biblioteca Bootstrap, que es una biblioteca CSS, cual nos ayuda a crear interfaces de usuario. Y para reaccionar específico, agregué react Bootstrap. Y aquí tenemos una lista de las que hay que hacer. Esta es la idea del hacer, y esta es la descripción del hacer, y esta es una casilla de verificación para mostrar si se ha hecho o no Y luego tenemos una página de formulario crear para hacer, y aquí los usuarios pueden ingresar el título y luego configurar la casilla de verificación si esto es importante, si esto lo ha hecho, y luego crear para hacer Veamos qué he cambiado dentro de la app. Entonces para ver los cambios, creé esta es la estructura de carpetas después de agregar algunos códigos. Entonces dentro del después TS 65, agregué el paquete react Roadom React Rotterdom es un paquete que nos permite crear navegación y crear enlaces dentro de nuestro React Entonces aquí puedes ver que cuando haga clic, si voy a barra diagonal Crear, se mostrará esta página Y si presiono en lista o aquí en los dos, entonces volveremos a esta página de inicio. Cómo se ha hecho. Back Router proporciona una clase externa de navegador, y aquí tengo un encabezado, y aquí tengo rutas, la primera ruta, que es una barra diagonal se mapeará al componente list, que obtiene un to do como una matriz de elementos para hacer, y slash create va a la página create Pueden ver, por ahora, agregué codificé duro una lista de todos. Entonces por ahora, no agregué ninguna comunicación ahorradora. Solo hay fijos a dos, que esta es la descripción, y esta es la primera en hacer la segunda en hacer. Y el primero es importante. Es verdad. Para que veas que esta debería estar bien por ahora, no tenemos una columna que hacer. Pero por ejemplo, voy a cambiar esto y si actualizo la página, mato la terminal, déjame volver a poner en marcha. Y si cambio esto a través, se puede ver que se ha cambiado. Entonces, para la página create, veamos la estructura de carpetas. Entonces tengo una cabecera, se puede ver aquí. Tengo modelos, que esta es la definición del cada Tu do tiene un ID, tiene un título, tiene un booleano, lo que muestra si esto es importante y tiene un booleano que muestra si se ha hecho este todo. Y dentro de encabezado, tenemos un enlace a Slash, que es esta app de todo, que es esta, y luego tenemos otro link para lash, que es la lista, y luego tenemos el link para crear, que es crear todo. Y dentro de Todo tengo dos componentes. Uno de ellos es lista, que como pueden ver, tenemos una tabla y estos son los encabezados de esta tabla y dentro de aquí, voy a leer todos como propiedad, y estamos iterando sobre el studo y para cada ítem, mostraremos ID title, y mostraremos una casilla de verificación y la condición de que si esto ha sido marcado es que si este Studo Dentro de crear página, tenemos un formulario y este formulario tiene un título, que está aquí, y luego tenemos dos casillas de verificación, la primera casilla de verificación, y la segunda casilla para si esta tarea es importante y si esta tarea se ha realizado Hasta ahora, este es un proyecto simple de reaccionar. No tiene ninguna comunicación con el servidor. Acabo de agregar el paquete de router react como la navegación, y agregué react Bote trap y vamos aquí dentro de nuestro paquete el archivo JSON. Verás lo que paquetes que tenía. Y aquí está la lista de todos mis cambios. Entonces agregué el componente de encabezado. Yo agregué el todo. Creé dos archivos para crear listado a dos. Dentro hasta TS six, eliminé todo el código de la placa de caldera, y agregué el navegador nutria y el encabezado, y dentro de Git ignore, agregué esa carpeta de ideas para que no se incluyera. Y agregué algunas dependencias, puse una correa, reaccioné, correa de colillas, y reaccioné Rotter Entonces voy a comprometer esto y te voy a dar la fuga de repositorio para que también puedas checar y puedas comenzar desde este punto, y puedes revisar mis cambios y luego tienes este proyecto. 5. Repositorio de github 06: Entonces este es el repositorio que he creado dentro del Github, y me comprometo y empujo todos mis cambios a este repositorio. Por lo que la URL será Pima consulta dos app. Puedes clonar este repositorio desde SSH dentro de tu terminal, simplemente puedes ejecutar el comando Git clone y luego copiar este repositorio o puedes hacerlo con SSS, o puedes descargarlo como un archivo Zip Entonces todos mis cambios hasta ahora existen en este repositorio, y a partir de este punto, puedes consultar este repositorio, y luego tienes todos mis cambios respecto a los cambios que mostré en el video anterior. 6. 07 Instalación y ejecución de aplicaciones de servidor: Hablemos del segundo repositorio que he creado. Como recuerdas del video anterior, ahora mismo, tenemos toda la app todo y todos dentro del código fuente del frente y como variable estética. Para que la app fuera más realista, creé una aplicación de servidor. Y esta aplicación servidor la he creado con NGS. Si no has trabajado con NOJ, no te preocupes. No necesitas ser un experto en Nojs para entender lo que está pasando El proyecto es realmente sencillo. Entonces lo único que necesitas es revisar este repositorio dentro tu terminal y luego simplemente ejecutar el comando NPM install y luego node index dot js Echemos un vistazo al archivo js index y veamos qué está haciendo esta aplicación. La primera línea está requiriendo Express. Express es un servidor web para NOCHs que no necesitamos ir tanto a los detalles Lo único que hay aquí es importante es el puerto que es 8,000. Y aquí solo le estamos diciendo a nuestro servidor web que la respuesta debe ser en JSON. Y aquí tenemos una lista de todos codificados duro como aquí. Y tenemos dos puntos finales, que es el primero es un punto final get que devuelve esta lista de todos. Y el segundo es un post input, post request que nos permite enviar una solicitud de post para reducir todos. Y entonces esto creará un nuevo todo. Y entonces empujará esto a la lista de todos que tenemos. Y al final del expediente, escucharemos la olla. Entonces veamos esto en la práctica. Déjame abrir mi terminal y dejarnos ir a hacer app de servidor. Ya lo instalo con NPM install, así que no necesito instalar nada Pero para ti, si esta es la primera vez, solo lo ejecutas, y luego yo ejecutaré Node Index Dodds Aquí, verás que la app se está ejecutando dentro del host local 8,000. Y el enlace que podemos ver a la lista de los Todos es slash Todos Entonces voy a ir aquí y agregaré todos. Perfecto. Ahora, tengo una lista de los dos dos, y puedo ver el primer enlace. Esto es Comprar abarrotes, ha hecho es rápido y es importante, es cierto Y el segundo es caminar el pato. 7. 08 lectura del todo desde el servidor: Entonces en este video, queremos que la app sea más realista leyendo la lista de todos desde el servidor que hemos creado en el video pasado. Entonces para hacer eso, iré a mi IDE, y aquí dentro de nuestra app el archivo Ts X, veremos que tenemos esta lista codificada duro de por hacer. Cambiemos esto para que funcione realmente con el saque. Quiero usar un estado de reacción, y lo llamaré data. Y aquí queremos tener una llamada API y recuperar los datos de los siete Entonces déjame usar vamos a definir esto como un efecto de uso. El efecto de uso es un gancho de reacción que nos permite ejecutar una devolución de llamada cuando la función, cuando el react está renderizado este componente Y aquí voy a definir una variable como estado, y la llamaré data y set data, y usaremos estadísticas. Y como estamos usando type script, llamémoslo todo type, que será una matriz del tipo todo. Y necesitamos axios y llamemos también vamos a definir la variable que para la API, nuestra API sería host local 8,000, que es la dirección de nuestro servidor Y para poder leer el to dos, este será el pase. Entonces XS dependiente S es un paquete al que podemos llamar a la API con eso. Y aquí estamos teniendo estamos leyendo la API, estamos devolviendo la respuesta y la estamos almacenando como resultado ya que nosotros es Asincrónico Ya que llamar a una API es un Asincrónico, así que tenemos que esperar hasta que esto se haya hecho y luego no lo hacemos ya que estamos devolviendo todo el objeto como resones lo configuraré como Veamos aquí. Añadamos un registro de consola para asegurarnos de que nuestro resultado es correcto. Necesitamos instalar los axios, así que lo agregaré con tu add a nuestras dependencias Ahora lo tengo instalado. Puedo importarlo de mi paquete ese archivo Jason, y aquí también necesitamos fijarlo como fecha. Y aquí también agregaremos la lista de las dependencias que tenemos para este gancho Aquí tengo un error que dice argumento de tipo promise void no es asignable Para resolver este problema, definiré una función fetch aquí, llamaré a una función fetch data y pondré mi definición de todas mis líneas Esta función será asíncrona y voy a quitar el teclado asíncrono de aquí y aquí voy a llamar a los datos Y aquí verán una advertencia que por ahora, podemos ignorar. Entonces, comencemos. Déjame como puedes ver aquí, ahora estoy recibiendo una red. Veamos cuál es la razón de esta red. Entonces vayamos a la pestaña de red del navegador y refresquemos la página. Vamos a ver aquí que tenemos que solicitar los dos dos, y este ha sido fallado. Y veremos estricta política de origen. Entonces en JavaScript, ya que estoy haciendo un AgxRquest, esta es una de las características de seguridad del navegador que esto permite que la aplicación comunique con otro servidor que no está en el Y debido a que estamos ejecutando nuestro host local en el puerto 3,000 y el back end nuestro Node JS funcionando en 8,000, esto sucederá. Así que arreglemos esto. Iré y abriré mi servidor. Y aquí podemos usar un middleware. Voy a usar este CORS, y voy a decir que si el tráfico viene del anfitrión local 3,000, la solicitud de prevuelo podría ser Y necesitamos un módulo CORS para esto, así que lo agregaré como CORS, y podemos instalarlo agregando paquete CRS Así que vayamos a la terminal y déjenme que me dejen iniciar el proceso, y ahora nuestro back end se está ejecutando en el puerto 9,000 y veamos Perfecto. Ahora tengo la solicitud. Veo mis resultados y tengo los datos, y luego tenemos estos dos grosero Entonces con estos cambios, permítanme agregar mis cambios al Github. Voy a commu esto como un CORS que permite a los clientes. Empujaré mis cambios y dejaremos cerrar este proyecto e ir al cliente. Y aquí, ahora tenemos el resultado. Entonces como pueden ver, el resultado, estoy imprimiendo todas las cosas, así que cambiemos esto por datos de resultado y el resultado que los datos deben ser lo que esperamos exactamente. Que es el primero es ID y luego por crossers. Y ahora que tenemos los datos del back end, en lugar de esta variable, pasemos esto. Llamemos pasemos datos a esto y eliminemos esto también. Y a la primera vez porque no se ha definido la variable, y vamos a definirla como una matriz vacía. Bien, muy bien. Y como pueden ver ahora, tengo estos dos objetos, tengo esto y estos datos vienen de la parte de atrás. 8. Envío de Todos al servidor: En este video, quiero trabajar en la segunda pestaña que creamos en nuestra aplicación. Ahora que tenemos la lista que viene de nuestro backend y estos datos provienen de la API, también quiero vincular este formulario a nuestro backend y asegurarme de que estos datos también serán transferidos a través de la API a nuestro servidor y serán almacenados en el array que hemos definido en nuestra Así que comencemos. Pero primero, permítanme comentar y empujar mis cambios desde el último video. Siempre es una buena práctica comprometerse con frecuencia y mantener el código limpio para cada pieza de cambios que realizó. Diré, agregaré un mensaje de confirmación leído a esas listas de API. Déjame venir y empujar estos cambios. Bien. Entonces comencemos con nuestro formulario de creación que hemos utilizado para esto. Aquí, ahora tengo una forma estética. Quiero cambiarlo y almacenar los valores dentro del estado de reacción, así que cuando el usuario procesa este botón de crear para hacer, podemos enviar los datos a través de la API. Así que definamos una variable patrimonial para mantener los Datos, llamémoslo. Llamemos a esto como a hacer, y el tipo será el tipo todo. Así que vamos a comprobar el tipo de todo que aquí hemos definido. Tenemos el título de identificación es importante y lo ha hecho. Y como aquí vamos a crear un todo, y este todo no tiene un ID, y este ID se generará cuando la API asigne esto a una base Déjame hacer esta identificación opcional por ahora. Y aquí quiero tener un manejador sin cambios para mi formulario y quiero llamar a esto como un evento y quiero definir una función como un título conjunto y luego pasar el valor que estoy recibiendo de los cuatro vamos definir esta función set title Será que obtendremos un título como fortaleza y queremos almacenarlo como dentro del valor al objeto que hemos creado. Y si no estás familiarizado con la sintaxis, esta es una sintaxis ES que estoy usando un operador spread. Y aquí le estoy diciendo a JavaScript que quiero tener un nuevo objeto con todas las propiedades del objeto anterior, pero voy a anular el valor del título. Entonces todo seguirá igual, pero el título será este nuevo valor. Y también en ESX, tenemos esto que si la clave y el valor son los mismos, solo puedo hacerlo más simple así Es corto. Y ahora tenemos un error aquí y dice que no es asignable a esto porque algunos de los valores están indefinidos Entonces para el valor inicial, vamos a crear un objeto vacío, que el título será una cadena vacía y es importante, será falso y como hecho también será falso. Y por ahora, solo vamos a asegurarnos de que esta función que tenemos funcione como se esperaba. Quiero ver el título dentro mi consola siempre que el usuario cambie el valor aquí. Probemos esto y abramos nuestra consola y escribamos nuevo en Bien, genial. Ahora se puede ver que tengo todos los valores. Así que definamos también la otra función. Definamos también otras dos funciones para establecer es importante. Y el valor será igual de importante, que es un booleano Y voy a utilizar igual de importante, y también voy a hacer lo mismo por lo que ha hecho. Y dentro de mi control de formularios, también agregaré un cambio, y esto será un evento. Y aquí voy a llamar set es eventos importantes que apuntan a que verificó. Y voy a hacer lo mismo aquí, aquí, también voy a definir un evento y luego set ha hecho serán eventos que objetivos que verifiquen. Creo que no lo reemplacé aquí, set ha hecho. Y siempre que el usuario envíe este formulario, tengamos que enviar manejador, que yo lo llamo Definamos enviar aquí. Y por ahora, vamos a registrar nuestro objeto todo para asegurarnos de que necesitamos todo bien. Entonces aquí voy a agregar un valor y dejarnos. Como pueden ver, la página se refrescó cuando presiono este botón Evitemos que la página actualice pasando un evento aquí y evitando el comportamiento predeterminado del evento click que está actualizando la página. Y ahora tenemos este tipo de déjanos ir a ver qué hay en presentar. La función es, este es un manejador de eventos de formulario. Así que definamos esto como un evento formulario. Y veamos que esta vez te llamaremos para que te hagas cool. Ahora tengo el valor aquí que ha hecho es falso, es importante también. Entonces, si creo algo más, entonces será que ambos sean verdad. Y si acabo de quitar esto, entonces será falso. Ahora, estoy seguro de que el objeto que estoy creando está aquí, correcto. Así que vayamos y llamemos a la API con este objeto que tenemos. Como puedes recordar de nuestro objeto de lista de nuestros hasta Ts, está bien Hemos creado un efecto de uso dentro del efecto de uso, teníamos esta función de fetch data que estábamos llamando a la API Y ahora necesito la misma variable API. Entonces pongamos esto dentro la carpeta y llamémoslo como una constante. Entonces voy a crear una nueva carpeta y la llamaré constante, y ahí dentro, voy a crear un archivo. Lo llamaré API, y pasaré este valor a ahí, y voy a exportar esto como una variable. Y entonces lo haré aquí, solo voy a importar esto. Y ahora dentro de nuestro objeto create, queremos llamar también a la API. Esta vez, la API será tipo de post, y también la llamaremos con el objeto Todo. Para llamar a la API, usaré el método axis dot post, y aquí también podemos tener otro objeto como algún tipo de parámetro. Entonces llamaré a esto como un todo y el valor será el objeto que tenemos. Añadamos también un registro de consola para el resultado. Vayamos y llamemos a esto nuevo todo, y es importante. Crear todo. Entonces tenemos una mala petición aquí. Veamos la respuesta del servidor. Y en formato válido para hacer. Así que vamos a revisar nuestros servidores para ver qué se espera. Abriré nuestro código de servidor en esta nueva ventana. Entonces aquí hemos definido slash para hacer eso esperamos que la petición y el título provengan del cuerpo Como pueden ver aquí, he leído todas las aletas por separado. Así que cambiemos a nuestro cliente para enviarlos también en un campo separado. Entonces llamemos a esto como título para hacer ese título ha hecho será hacer eso ha hecho y es importante será hacer eso es importante. Llamemos a la API de nuevo y maravilloso. Obtuvimos una respuesta. El ID se ha guardado, y ahora tenemos los cuatro. Y aquí, comienza el reto principal y que si vuelvo a la página de lista, solo voy a ver dos objetos, y tengo que actualizar esta página hasta que los datos se rellenen desde la API. Entonces veamos qué está pasando. Y si voy a crear pestaña Tulu y creo otro y dos Y por ejemplo, yo diría que es importante para nosotros. Este formulario se enviará, pero dentro de la lista, no puedo decir que no puedo verlo porque este es un componente diferente. Y estos diferentes componentes no tienen forma de comunicarse con este otro componente. Y en el siguiente video, comenzaré a hablar sobre el patrimonio global y la forma en que anteriormente estábamos resolviendo este tipo de problemas. Y luego te mostraré por qué Raquery es una mejor solución y cómo podemos implementar esto con react 9. Soluciones de gestión del estado y sus enfoques: Pero cómo podemos resolver los problemas que hemos visto en el video anterior. La primera idea es como poner todo en un solo lugar. Así que mantengamos todos los datos relativos a los dos dos en un solo lugar. Y este era el concepto de la tienda que nos dejó tener una tienda que guarda todos los datos y los componentes de la lista en lugar de llamar a la API, lee los datos de este desgarro, y el componente create pone los datos en la tienda. Así que cada vez que estamos creando una nueva tarea, create component pondrá los datos en la tienda, y luego store notifica a todos los demás componentes como componente de los demás componentes como lista que los datos han sido cambiados Entonces aquí está la nueva lista de las tareas pendientes que debes renderizar. Y los componentes de la lista se volverán renderizar y con los nuevos datos. Y de esta manera, podemos tener la comunicación entre estos dos componentes. Y esta fue la idea del redox, y Redox implementó esto como una solución para la gestión patrimonial, una de las bibliotecas que brindó este tipo de Y personalmente usé redox en el pasado, y realmente disfruté trabajando en ello. Y el concepto es así, separemos la representación de los datos de los propios datos. Y en redox, tenemos un concepto de la tienda de que todos los datos que se guardarán dentro del front-end y se mostrarán al usuario se mantendrán dentro de la tienda, y los demás componentes están suscritos a esta Y siempre que cambie algún tipo de datos, estos componentes serán notificados y re renderizarán estos componentes, y luego mostrarán el valor DO. Veamos la arquitectura redux. Aquí, imaginamos que tenemos una aplicación que utiliza que almacena el valor del usuario, la cantidad del dinero que tiene dentro de su valet en línea. Y ahora tenemos algún tipo de acción dentro de esta aplicación, podemos depositar, podemos retirarnos de esta aplicación. Queremos tener una aplicación de una sola página en la que el usuario vea su saldo todo el tiempo. Y en redox, el concepto del concepto es así que tenemos una interfaz de usuario UA, y todo lo que hace el usuario es una especie de acción Por ejemplo, si un usuario hace clic en un botón, esta es una acción. Si el usuario rellena los datos dentro de un formulario, esta es una acción. Y cada vez que ocurre una acción, tenemos una función de despacho que desencadena esta acción. Eso, por ejemplo, en este caso, en este video que estás viendo, en un principio, tenemos un saldo del cero, y ahora el usuario activa un depósito. Y este es un botón que, por ejemplo, hace clic en Depositar $10. Y esto desencadenará una acción. Una acción es un objeto que tiene dos propiedades. Uno de ellos es el tipo de acción, que en este caso es depósito. Y la carga útil es el valor real que tiene esta acción, que es en este caso, diez. Entonces cada vez que el usuario hace esto, estamos activando una acción que es el tipo de depósito y el valor de diez, y la tienda S está escuchando todas las acciones Y dentro de la tienda, tenemos un concepto del reductor, y el trabajo del reductor es conseguir acción y procesar la acción y actualizar el estado sobre esto en base a la acción que está sucediendo. Por ejemplo, si el primer valor de la boleta del saldo de la boleta del usuario era cero, y luego agregamos una acción para el depósito del diez, el reductor sumará el cero con diez y pone este nuevo diez como nuevo valor para el nuevo saldo como diez dentro de la tienda. Y este es todo el flujo y todos los demás componentes que estén interesados en el valor del saldo escucharán y cuando esto suceda, una tienda actualiza y notifica a todos estos componentes Y si, por ejemplo, si tienes un componente de cabecera que muestre el saldo dentro de ese, este componente se le notificará que el saldo ha sido cambiado y luego se volverá a renderizar. Y esta vez, como saldo, no obtiene cero, obtiene diez, y luego renderiza este diez como un valor neo. Entonces en este caso, podemos comunicarnos indirectamente entre diferentes componentes que están trabajando con el mismo conjunto de los datos. Y esto esto nos ayuda a lograr nuestro objetivo y a tener una sola aplicación de página que los usuarios no tengan que actualizar la página, y diferentes partes de la aplicación se comunicarán a través de la tienda. Por lo que siempre que cambien los datos, también se actualizarán todas las partes relevantes. 10. Desventajas de Redux: Yo personalmente uso redox en muchos proyectos, y es una biblioteca maravillosa Es una biblioteca muy buena. Pero también hay algunas desventajas cuando estamos trabajando con redox Y en este video y en esta conferencia, voy a hablar de estas desventajas. Lo primero es que en realidad redox necesita mucha placa de caldera Entonces necesitamos que se requiera tanto codificación, y la mayor parte de la codificación son solo plantillas. Entonces, por ejemplo, necesitamos action action creator, y las acciones son tipo de objetos con tipo y carga útil. Y deberíamos escribir todo este código, que es un objeto realmente simple, pero es todo lo mismo y lo mismo y lo mismo, y requiere mucho tiempo para escribir todo este código de paleta de calderas. Y la segunda parte negativa sobre redox es que redox no proporciona lógica asíncrona Entonces toda la arquitectura se basa en la sincronía. Entonces el usuario desencadena una acción, tenemos un reductor y este reductor cambia los datos en el estado. Y luego después de eso, los componentes que se hayan registrado para el estado obtendrán el valor actualizado. Pero si queremos, por ejemplo, llamar a una API, que es una operación asíncrona, redox no proporciona una solución para Por lo general, tienes que construirlo manualmente, o deberías usar una biblioteca de terceros como redox Tank y redox Y cada biblioteca de terceros también proporciona una curva de aprendizaje para el equipo. Entonces tus desarrolladores deberían aprender esta nueva tecnología y deberían estar familiarizados con trabajar con eso. Entonces esta es la segunda desventaja de trabajar con redox. Y la tercera desventaja es que redox no tiene ningún mecanismo de almacenamiento en caché incorporado Entonces, si definimos una llamada a API dentro del redox que si ocurriera una acción, se debería llamar a una API y se deben recuperar los datos, cada vez que se active esta acción, también se activará la llamada a la API Pero si, por ejemplo, sabemos que en el marco de tiempo de 5 minutos, los datos no se cambiarán y podemos usar la versión de almacenamiento en caché de los datos, entonces no necesitamos llamar a esta API cada vez Y desafortunadamente, redox no proporciona esto. TNSaquery por defecto proporciona un mecanismo de almacenamiento en caché. Entonces cada vez que antes de llamar a una API, primero, devolverá el valor que ya está en la caché, y tenemos diferentes opciones que podemos decir cuál será nuestra política respecto a este almacenamiento en caché Y esta es una característica realmente útil. Y la última y cuarta desventaja sobre redox es que redox no proporciona ningún método de recolección de basura Y qué es una recolección de basura en la programación cuando tenemos algunos objetos que ya no se usan, y no hay referencia a esos objetos, los llamamos basura. Y esto ha sido introducido por primera vez por Java que, por ejemplo, en Java, cuando creas un objeto, tienes una referencia a ese objeto. Pero si eliminas esta referencia, ese objeto permanece en la memoria. Pero como no hay referencia a ese objeto, tu programa ya no puede usarlo. Y Java tiene un sistema incorporado que detecta este tipo de memoria y luego las elimina. Y todo este proceso se llamará recolección de basura. Y en redox, cuando estamos almacenando algunos valores dentro de nuestra finca, Redux no proporciona ningún método de recolección de basura Entonces, si almacenamos datos dentro nuestro patrimonio y el programa ya no los necesita, permanecerá en el estado para siempre hasta que implemente manualmente un método de recolección de basura. Y esto también es una desventaja. otro lado, TNStaQuery proporciona esta funcionalidad, y tenemos una recolección de basura que asegura que los datos que ya no se requieren serán eliminados del patrimonio y de la 11. Escribir la primera consulta: Así que comencemos con rea query y veamos cómo rea query puede ayudarnos a resolver nuestro problema. Entonces primero, necesitamos agregar la dependencia. Voy a instalar la dependencia con, agregar un stack slash React Query Entonces como puedes ver dentro de nuestro paquete, Jason, tenemos una nueva entrada para Raquert. La versión que estoy usando es la versión cinco. Así que ahora instalamos el Raquery. El siguiente paso sería configurarlo. Necesitamos envolver nuestra aplicación con un proveedor. Entonces aquí voy a ir y dentro de nuestro rotor de navegador aquí, voy a crear un nuevo proveedor cliente de consulta. Y voy a envolver todo aquí. Y esto requiere de un nuevo cliente, que deberíamos inicializarlo. También voy a proporcionar Raquert también esto, lo llamaré como cliente de consulta, y diría nuevo cliente de consulta, y voy a pasar este cliente de consulta aquí Y también voy a importar esto de Raquery. Y ahora hemos envuelto nuestra aplicación con el proveedor de consultas y nos permite usar rea query. Y el siguiente paso sería en realidad ir dentro nuestro componente app y aquí dentro de este fetch data, voy y voy a extraer todo este código y ponerlo dentro de RaqueryHok Entonces, la forma en que funciona la consulta rea es como definimos consultas cada vez que queremos tener un dato de la API, y esto se llamará query. Y siempre que queramos cambiar los datos en la API, llamaremos a la mutación. Entonces aquí para éste, para la lista un TC y para el componente de lista que están leyendo los datos de la API, voy a crear una consulta. Y para el componente create to do, que realmente cambia la lista en la API y crea un nuevo todo, usaré una mutación. Aquí, en lugar de llamar a la API dentro de un efecto de uso, voy a utilizar la sintaxis de consulta rea, que es un dato como este y se está cargando. Y tenemos una función de query, que se llama use query. Y aquí dentro de la consulta de uso, pasaré un objeto, y este objeto debería tener una clave de consulta que actúe como un índice único para esta consulta. Entonces voy a llamar a la clave de consulta aquí. Para hacer, y habrá una función de consulta, que la llamaremos query eN y esta será en realidad la llamada API que tenemos, que llamaremos a la API, y luego solo necesitamos la parte de datos. Entonces voy a usar voy a eliminar todo este efecto de uso. Y tampoco necesito los datos aquí más. Y debido a que esta es una acción asíncrona, una consulta también nos proporciona un booleano que muestra si se ha llamado a este hook, si se ha llamado a esta consulta de uso Y si la app sigue en carga, entonces simplemente devuelvo un párrafo con carga. Así que comencemos nuestra app. Y déjame mover esta función y también primero déjame mover esta función dentro del componente list porque ahora no queremos pasar esto como parámetro al componente list. Así que déjame agarrar todo este código. Y aquí voy a cambiar el componente de lista para leer los datos del Y lo usaré como un dentro del mapa en lugar de leerlos de propiedades, los voy a leer desde el gancho. Y para hacer será tipo del tipo todo. Y ahora puedes ver que en realidad tengo todas las cosas que hacer, lo cual es increíble. Y hagamos un poco de limpieza sobre el proyecto. Ahora ya no necesito este tipo de propiedad. Y también, vayamos a subir el expediente T six. No necesitamos todos estos aportes. Y ahora, como pueden ver, también la separación del concepto es realmente mejor. Ahora, sólo defino un cliente de consulta. Y luego dentro del proveedor, voy a proporcionar esto. Y dentro del componente list, component está llamando a esta API y usa una consulta, y todo el efecto use ha sido reemplazado. Y esto será reconocido como clave para esta consulta. Entonces, lo que es lo más interesante de rea query es que en el siguiente video cuando empiece a editar la consulta, y cuando empiece a agregar un nuevo que hacer a la lista de tareas pendientes, estos a dos se usarán como clave única. Y siempre que eso esté dentro del componente create, estamos haciendo una mutación y estamos actualizando esta clave. Ahora bien, Rea query sabe que la clave algo respecto a esta clave ha ocurrido, y luego automáticamente vuelve a renderizarlo, por lo que el último componente puede ser notificado al respecto. Comprometamos el cambio cometamos nuestros cambios y luego unámonos al siguiente video. Voy a llamar a esto usando react query para ir a buscar esas listas Y. 12. Escribir la primera mutación: Bien, cambiemos nuestro componente create, create page para usar también rea query. Pasemos aquí al componente create. Tenemos todo el código fuente, y dentro lo más importante es enviar. Y aquí anteriormente estábamos llamando a esta API, y luego estábamos poniendo el resultado aquí. Entonces ahora voy a definir un gancho de consulta rea. Esta vez, lo definiré como crear para hacer. Y ésta, voy a usar la mutación de la consulta rea. Y como consulta, también puedo proporcionar un objeto a esta mutación. Y aquí, en lugar de llamar a la función de consulta, llamaremos rea consulta causa función de mutación, que es mutación FN Y aquí en realidad podemos llamar a lo que se debe hacer. Tengo un que hacer, que quiero crearlo, así que lo pasaré como parámetro aquí. Y aquí vamos a hacer esto como la llamada API. La función será la API a la que se debe llamar. Y además este objeto nos proporciona un manejador que es el éxito, y esto se llamará cuando se resuelva la API y cuando obtengamos la respuesta del servidor Entonces aquí solo voy a agregar una consola así por ahora para asegurarme de que el éxito, y luego solo voy a imprimir los datos. Entonces creé la mutación ahora, y cuando ocurra la forma, en lugar de llamar a la API, simplemente llamaré a la mutación. Eso muta, y voy a pasar este objeto este pudo como mi objeto No necesito esto porque ya lo definí como un objeto, así que esto puede funcionar. Así que vayamos y abramos nuestra consola y también nuestra red para ver qué está pasando. Voy a llamar a esto todo con consulta de reacción, y eso es importante será a través. Entonces como pueden ver, tengo la reacción, los datos han sido transferidos. Tengo la consulta, y por dentro, tengo mis ansecs Y vamos a ver la lista, y maravilloso. Verás que aquí ya tengo el valor. Vamos a crear otro boleto. Voy a llamarlo otra prueba y voy a escoger el puesto para que haga, y luego solo regresaré y verán que ya lo tengo. Ahora que hemos llegado tan lejos, vamos y nos permite mejorar nuestra app. Entonces creé dos páginas diferentes para el teléfono, que es una para envío y otra para la mesa. Y en nuestra página de inicio, también se vuelve a mostrar la página de lista. Hagamos que la app sea más sencilla y tengamos una especie de dejemos poner el home como un dashboard para que el usuario pueda ver la lista de las tablas y también pueda crear el nuevo todo, también. Entonces voy a ir dentro de mi app el archivo T six y voy a reemplazar voy a agregar otra ruta, y para aquí, voy a usar la lista y Y aquí dentro mi app six foil, busquemos para crear todo. Teníamos la navegación, y aquí pasaremos la lista a la lista, y luego aquí cambiaremos la hasta eso. Entonces ahora aquí deberíamos ver la lista, deberíamos ver el create. Y para el índice, seguimos usando los componentes antiguos. Así que vamos a crear un componente de índice. Llamemos a esto como una página de inicio. Y nuestra página de inicio debería ser un componente que renderice ambos de estos. Entonces aquí dentro de mi página de inicio, definiría una página de inicio, y este será un componente trasero, que devolveremos create que conservará cuál era el nombre de la página create Create. Y luego también tendremos la lista, así que voy a poner la página de crear aquí y también voy a usar la página de lista aquí, y voy a dejar importar estos dos componentes y vamos exportar página de inicio por defecto y dentro de nuestro Udot 65 Queremos importar también la página principal. Tan bueno exacto. Ahora tengo una página de lista, tengo un cuatro crear y aquí tengo un Todo. Así que comencemos a probar nuestra aplicación. Ahora tenemos esta página de lista. Tenemos este crear que hacer, y ahora tenemos nuestra página de inicio. Y aquí voy a crear otro que hacer para acariciar perro, por ejemplo, y voy a escoger las dos cosas, y luego voy a crear para hacer Y ves que no pasó nada. Entonces, ¿cuál es el problema? Y vayamos a la página de lista, y ahora tengo aquí al perro acariciador Pero si vuelvo, como, Bien, ahora lo tengo de vuelta. Entonces hay un tema aquí que quiero discutirlo. Así que vamos a crear otra tarea. Yo sólo lo llamaré diez. Vamos a crear. Y ya ves cuando esto sucede, este componente no recibe notificaciones. Y esta es la razón por la que definimos las claves, pero no le dijimos a la consulta rea que actualizara las claves. Entonces cuando hacemos esta mutación, cuando estamos llamando a esta API, sabemos que los todos que existen en la API han sido cambiados. Y dentro del éxito, hay una manera de que podamos decirle a rea query que los resultados anteriores que obtuviste de la API no es inválida. Entonces lo haré llamando a consultas invalidadas. E invalidar consultas, lo que hace es que le dice la consulta rea que el valor previamente obtenido que tienes para la lista de todos no está actualizado, por lo que necesitas volver a llamar a la API Entonces lo haré y aquí también necesito el cliente de consulta. Así que vamos y necesitamos este archivo. Así que vamos a crear un nuevo archivo. Déjanos también lo puedo poner en constante, pero déjame crear una carpeta para ello. Voy a llamarlo una consulta de clientes de consulta y vamos a llamar a un nuevo cliente de archivo que seis y vamos poner esta línea ahí y exportarlo. Y aquí, usemos el cliente de consulta de ese archivo. Y dentro de nuestro pudo dentro de la consulta, también podemos importar el cliente de consulta. Y y aquí tenemos unas consultas invalidadas, y voy a usar la misma clave que he usado anteriormente para hacer Y esto le dirá a Rhea consulta que esta clave ha sido invalidada Y entonces deberías refetch y aquí necesito decir qué tipo de clave de consulta quiero invalidar Entonces usaré clave de consulta y luego todos. Entonces vamos a verlo en acción. Vamos a ver nuestra app. Y esta vez estoy entrando 20, lo cual es importante, lo ha hecho maravilloso. Ves que esto sucede de inmediato. Y veamos nuestra solicitud de red y veamos qué está sucediendo realmente. Entonces si cambio esto a 200, cuando estoy presionando Crear, primero, tenemos una solicitud perfid, que está relacionada con CRS, y luego tenemos un objeto create, y luego este caso obtendrá la nueva lista de hacer Tan increíble. Ahora puedo trabajar con la app, y fácilmente, estos dos componentes se están comunicando entre sí sin siquiera saber que existen. Y puedo ver mis cambios inmediatamente aquí. 13. Mostrar todos terminados: Así que solo reinicié el servidor para volver a los valores iniciales que teníamos. Y hasta ahora, hemos creado nuestra primera consulta. Hemos creado nuestra primera mutación. Y ahora estos dos componentes están completamente conectados entre sí a través de la consulta rea. Y tal vez hasta ahora, te estabas preguntando que no es tanto beneficio porque solo cambiamos una llamada API y cambiamos otra llamada APL con consulta, cambiamos otra con la mutación, y tal vez esto no sea tanto peor usarlo Pero ahora continuaré mi codificación y ampliaré el proyecto y verán la rápida velocidad del desarrollo. Entonces para este video, quiero dividir esta sección dos secciones que la primera sección será la creación a hacer. Y la segunda sección sería el número de los a dos que se han hecho y el número de los viejos tots. Por lo que nos dará una idea de cuánto tenemos avances respecto a nuestro TutLih muchos de los artículos se han hecho Déjanos hacerlo, y luego verás lo fácil y lo rápido que puedo agregar esto a mi proyecto. Así que empecemos. Y aquí voy a nuestro componente de página principal, y permítanme cerrar algunos de estos para que sea más sencillo. Y aquí voy a añadir una fila que viene de reaccionar, poner una correa, y me permite tener dos columnas distintas en la misma fila. Y aquí voy a añadir un carbón y voy a poner el primero aquí, y para el segundo, sólo escribiré segundo y vamos a ver los cambios. Bien, genial ahora, tenemos esta sección y tenemos otra sección y también porque la fila no tiene ningún contenedor, pongamos la menor página dentro del contenedor. Así que déjame sacar el contenedor de la menor página y pongamos el contenedor aquí y retiremos el contenedor de la menor página. Y con esto, también es mejor porque ahora la lista es en realidad solo un componente de tabla, que es lo que debería ser. Y además, también puedo deshacerme de esta etiqueta ETGSS, así que simplemente puedo hacerlo mejor, y aún así se ve bien Bien. Tengo aquí mi tarea y esta es la segunda tarea. Vamos a crear un nuevo componente que lo llamaremos como un progreso. Y dentro de mi componente de progreso. Es dejarnos renderizar por ahora solo en segundo lugar y vamos exportar nuestros componentes predeterminados y vamos a usar el progreso dentro de nuestro compag Y ahora tenemos el segundo aquí. Todo está bien. Y aquí queremos mostrar el número de los todos que se ha hecho relativo al número de los todos. Entonces solo usaré el mismo código que tengo. Puedo fácilmente simplemente con el mismo gancho de consulta rea, puedo obtener todos los datos de la API. Y aquí también agregaré esta línea si está cargando, volviendo cargando, y aquí voy a mostrar quiero tener también una matriz para el terminado a dos, y será ese mapa. Y vamos por ahora, item, item that has done, and the item will be a type of to do type. Entonces usemos el poder del mecanografiado para hacer tipo, un ítem que ha hecho igual a verdadero Bien. Simplemente puedo escribir datos del artículo. Y aquí quiero mostrar artículos terminados de esa longitud. Y luego solo quiero tener algún separador y luego el conjunto para hacer longitud y datos que es longitud. Y déjanos verlo. Perfecto. Tengo dos tareas. Ambos ya se han hecho. Agreguemos otra tarea, llamaremos no terminada de hacer. Y yo sólo lo crearé. Y aquí ustedes han visto que de inmediato se ha cambiado a tres, pero hay algo mal porque estamos obteniendo el mismo número. Pero como pueden ver, simplemente podría crear otro componente que se adjunte a todos estos otros componentes, y todos ellos se sincronizarán sin siquiera necesidad de saberlo Y lo único que necesito saber es la clave de consulta. Veamos por qué este es el ítem que ha hecho. Añadamos una consola que para los datos. Y creo que esa es la razón porque deberíamos poner esto afuera y dejarnos ver la consola. Entonces tengo los datos como una matriz de tres y oh, perdón, debería usar filtro aquí porque solo me interesa conseguir los artículos que se han hecho. Entonces ese era el tema. Bien, genial. Y veamos. Ahora, otro no terminó de hacer otro que hacer. Y aquí voy a seleccionar esto. Estoy esperando que sean dos de los cinco, dos de los cuatro. Verás cuánto reacciona mi app y es tanto receptiva, todos los cambios están ocurriendo, y no hay necesidad de actualizar nada. Y hay otra cosa. Veamos la solicitud de red, y esta es realmente una de las mayores características de la consulta rea. Voy a añadir otra tarea y vamos a ver qué va a pasar a través de la red. Entonces tenemos una solicitud pre fluido, que es pedir el servicio para CRS Este es el to dos, que es el post request, que está creando Este es el post. El código de estado es 201 creado. La carga útil son estos valores. Y esto es lo real que hay que hacer que están obteniendo la respuesta de la API. Y estos son los cinco que tenemos que hacer cuales tres de ellos que han hecho es cierto para tres de ellos, y dos de ellos son falsos. Y esto es realmente maravilloso. Incluso cuando tengo dos componentes diferentes, y estos componentes diferentes llamando al mismo gancho no hay necesidad de una segunda llamada a la API. Entonces consulta Rea entender que esta clave es única, y solo llama a la API cuando estamos invalidando consulta aquí Es solo llama a una API, y estos componentes obtendrán los valores NO, y también estos componentes obtendrán el valor NO. Y esta es una de las características más geniales de rea query que me gusta mucho 14. Refactorización y limpieza: Bien. Y ahora, comencemos con un poco de refactorización Hay algunas cosas que podemos mejorar dentro de nuestro código fuente. Pero antes de comenzar eso, por favor considere cuánto esta solución es más simple que redox que si quisiéramos implementar esto con la biblioteca de gestión patrimonial, deberíamos crear y aquí deberíamos tener crear una acción desencadenando esa lista de todos dentro del patrimonio, y entonces el patrimonio debería ser el reductor, y este componente debió haber sido escuchado, y este componente debieron haber sido escuchados. Y todo el calderero, podría deshacerme de él con rea query Y ahora mismo, puedo hacer que incluso el proyecto sea más simple y más fácil. Hagámoslo juntos. Entonces, como mencioné anteriormente, la clave de consulta es una de las partes importantes de la a consulta, y este es el conector entre diferentes componentes. Cuando dentro de nuestro componente de creación, cuando en nuestro éxito, cuando nuestra mutación. Cuando estamos invalidando esta consulta, esto le dirá a una consulta a buscar para volver a llamar a la API y actualizar todos los cambios necesarios Y la clave de consulta, la definimos como una cadena. Entonces esto es un poco arriesgado, porque esto puede ser fácilmente mal escrito y a veces lleva al error Vamos a definir una variable aquí, llamaré exportar contras para hacer clave, y la llamaré a todas partes que voy a usar y también podemos definir definamos esto como una exportación de objeto. Reaccionar claves de consulta dentro de esto, voy a definir esto como un Tu Dos. Y aquí en vez de los Studos voy a usar la tecla todo, y nuevamente, buscaré todas las quids y aquí también usaré el Tudoky y dentro de mi componente de progreso, también usaré Y la única definición del anillo los indicará. La otra cosa es que hemos hecho lo mismo que siempre estamos leyendo está cargando. Si esto es cierto, entonces significa que esta API no se ha resuelto. Esta promesa no se ha resuelto. Creemos también un componente y llamémoslo llamada de carga. Y el componente de carga será éste. Simplemente puedo escribirlo en una sola línea en lugar de Así que llamemos a este componente da, componente de carga. Y aquí exportamos esto como una variable por defecto. Y vamos si esto, entonces vamos a devolver componentes de carga y también vamos a importar el componente de carga. Y teníamos esto también en otro lugar. Así que vamos también es un componente de carga. Y sí, ahora es mejor. En realidad, tenemos todas las cosas al mismo tiempo. Y vamos a asegurarnos de que no rompimos nada. Entonces me voy y voy a agregar completado pudo. Tengo cuatro de seis y ha hecho, la casilla de verificación es correcta Entonces todo bien, todo se ha hecho como se esperaba. 15. Crea contador para tareas importantes: Hasta el momento nos divertimos mucho con RequeriHasta ahora. Añadamos otro componente. Quiero agregar otro componente que muestre el número de la tarea importante. Vamos y permítanme copiar el componente de progreso y déjenme llamar a esto importante déjenme llamarlo importante hacer el Tsix Voy a llamar esto importante a esos y exactamente de la misma manera, voy a usar la consulta rea y la clave será la misma si estás y aquí solo voy a llamar a esto importante que hacer, y mi condición sería es importante. Entonces aquí dentro de mi JS dices que tendrás que hacer. Usemos esto también en nuestra página de inicio. Llamemos también a esto importante que hacer. El Tenemos un objeto de error o no objeto con claves ID. Si renderizas una colección, usas una matriz. Entonces veamos por qué, debería tener una función de lente aquí. Añadamos también un salto de línea aquí. Bien, increíble. Ahora, también veo uno importante. Vamos a crear una tarea tanto importante como realizada una tarea importante. Voy a marcar abucheos lo verás de inmediato aquí. La casilla de verificación está aquí, el número ha sido actualizado y todos estos han sido actualizados Me gusta mucho mostrarte lo rápido que puedes desarrollar tu app y lo rápido que puedes cambiar tu app. Y esto es maravilloso con el poder de la reacquery. Y ahora, si agrego otra tarea, que es, por ejemplo, importante es cierto pero ha hecho este número debería llegar a tres, pero esto será cinco de ocho. Y verás que esta es una experiencia única que un usuario ve de inmediato todos los cambios. Y no hay carga. Tenemos una aplicación de página completamente única y es muy rápida. Y veamos también el trabajo de la red arriba. Vamos a crear una tarea sencilla. Y como puedes ver, nuevamente, Rea Query no envía ninguna solicitud innecesaria. Tenemos sólo esta para que la haga, que es la creación de la tarea, y esta es la publicación. Y todos estos tres componentes, solo hay una llamada API, y esto también es maravilloso. 16. Pruebas automatizadas: Así que comencemos a probar nuestra aplicación. Ahora que hemos implementado algunas características en nuestra aplicación, queremos agregar algunas pruebas automatizadas. Pero, ¿qué es una prueba automatizada y cuál es la diferencia entre las pruebas automatizadas y las pruebas manuales? Por lo que una prueba automatizada es una prueba que se ejecutará automáticamente sin ninguna interacción de los usuarios y humanos, y comprueba algo dentro del software para asegurarse de que funciona como se espera. En relación con los otros métodos que realizan pruebas manuales, existen algunas ventajas sobre las pruebas automatizadas. Por lo general, los desarrolladores, cuando desarrollan característica, están probando manualmente. Pero cuando los proyectos son cada vez más grandes y también sobre todo en los entornos de producción, debe haber pruebas automatizadas porque los humanos siempre pueden cometer errores. Y hay ventajas de las pruebas automatizadas. La primera es que podemos detectar errores muy temprano en lugar de desplegar el producto y enviarlo al cliente y luego recibir una llamada telefónica de los clientes y usuarios que no pueden hacer algo en el software. Una prueba automatizada en la etapa más temprana nos muestra que algo anda mal. Y también nos permite una refactorización segura, para que podamos refactorizar Y si estamos en medio de la refactorización, estamos rompiendo algunas de las viejas funcionalidades de los softwares que no conocemos Si esa parte del código tiene una prueba automatizada, entonces esas pruebas fallarán, y podemos entender fácilmente que por nuestra refactorización, algo se ha roto Por lo que podemos abordar también este tema. Y las pruebas automatizadas también nos ayudan a acelerar el desarrollo. No necesitamos dedicar tanto tiempo a entender todo y ser siempre estresantes, siempre temer que si cambio esta parte del código, tal vez otras partes del código tengan dependencia de eso, y también aumentará nuestra velocidad y nuestra productividad. Y también nos ayuda para la documentación porque en test mostramos exactamente lo que se espera que haga un componente. Y todo el mundo cada desarrollador dentro del equipo que ve la prueba puede entender cuál es el comportamiento esperado de este componente. Y hay tres tipos de pruebas que en este curso, vamos a trabajar en ello. La primera es una prueba unitaria, y la prueba unitaria consiste en probar solo una pequeña unidad del código. Cuando digo unidad, significa que puede ser una función, puede ser una clase, puede ser algo que esté aislado del otro resto del código, y estamos probando cada unidad por unidad. Para esto, vamos a usar est, y después de eso, vamos a agregar algunas pruebas de integración, y vamos a usar la biblioteca react testing. Las pruebas de integración son un nivel más alto que las pruebas unitarias. En pruebas unitarias, estamos interesados en una sola unidad en pruebas de integración. Queremos ver todo el componente y queremos probar todo el componente y ver qué pasa si el usuario, por ejemplo, hace clic en algo y queremos probarlo. Y al final twen testing, realidad estamos probando toda la aplicación desde la vista de un navegador Entonces estamos lanzando un navegador, y luego en este navegador, estamos dando click en algo y estamos viendo algunas páginas, y luego estamos comprobando que algunos elementos específicos deberían existir en esta página. O después de hacer clic en este botón, esto debería suceder, y esto es lo que vamos a hacer con el dramaturgo 17. Escritura de la primera prueba automatizada: Entonces comencemos con las pruebas. El primer paso de las pruebas que queremos cubrir en estos videos son las pruebas unitarias, y vamos a utilizar para pruebas unitarias. Veamos nuestro paquete a JS en archivo. Aquí en la sección de script, tenemos una sección para la prueba, que como puedes ver, ejecuta scripts de reacción con test común. Debido a que creamos el proyecto con create react Act app, automáticamente agregó este script para nosotros y podemos ejecutar tu prueba, y luego nos preguntará ¿ qué tipo de prueba quieres ejecutar? Presionaré A para ejecutar todas las pruebas. Lo siento, presiono Q y se ha dejado de fumar. Volvamos a ejecutarlo, y luego presionemos A. Así que veamos. Va a SRC arriba el T seis, y aquí estamos recibiendo un feed Y la otra forma de ejecutar test, si estás usando webstore, también puedo abrir un archivo de prueba, y aquí tengo una opción para correr hasta probar al archivo Ts six Y esto me permite ejecutar esta prueba. Y también puedo ver los mismos resultados aquí en mi terminal. Pero por qué esta prueba está fallando porque ya cambiamos después del archivo T six, pero no actualizamos el archivo de prueba. Entonces esta prueba f ha sido generada por create react app, y esta fue la prueba predeterminada, y cambiamos hasta el archivo T six, pero no actualizamos la prueba. Por ahora, primero ignoremos este archivo de prueba. Voy a añadir primero algunas otras pruebas que son más sencillas de escribir. Y luego en los videos futuros, estamos volviendo a este archivo y vamos a arreglarlo. Vayamos a nuestro para hacer. Para ahí, tenemos diferentes componentes aquí. Este es el componente crear, importar para hacer componente, importante para hacer componentes, lista y carga. Y el componente de carga es un componente simple, así que permítanme comenzar a escribir con esta prueba para este componente. Creará una carpeta y lo llamaré subrayado Esta también es una convención que verás mucho en la comunidad de la zona que pondremos todos los archivos de prueba dentro de las pruebas de slash Añadamos un archivo llamado prueba de carga T six. Aquí, voy a añadir una columna de describir y voy a la derecha cargando componente. Y esto describe muestra que voy a probar este componente. Y dentro de este traje de prueba, tengo múltiples probadores. Puedo agregar, por ejemplo, renderizar correctamente. Y estoy esperando que cuando estoy ejecutando el componente de carga, el valor escrito sería un párrafo que contiene cargando 33 puntos. Vamos y vamos a renderizar los componentes y voy a renderizar el componente de carga y este componente no necesita ninguna propiedad, así que solo escribiré así para renderizar el componente que estamos usando react testing library. Así que estoy importando render de testing library react. ¿Y qué hace esto? Esto en realidad renderiza todo el componente, y luego quiero asegurarme de que dentro de mi pantalla, voy a ver este texto. Y para ello, también estamos utilizando de nuevo testing react testing library. Hay una función. Hay una pantalla de objeto que puedo importarla desde react py. Y aquí puedo ir a buscar por texto. Y estoy esperando que estas t estén dentro de mi documento. Entonces este será mi primer caso de prueba. Y vamos a esperar una pantalla que obtenga por texto, y estamos esperando que este el resultado de esta expresión esté dentro del documento. Vamos a ejecutar la prueba y perfecto. Ahora la prueba está pasando. Déjame asegurarme de que en realidad está funcionando, así que voy a cambiarlo con otra L, y esta prueba ahora debería fallar. Como puede ver, la prueba está diciendo que no se puede encontrar un elemento con carga LLL porque esto es incorrecto Voy a volver a revertirlo. Y ahora tenemos la prueba. Entonces en este caso, estoy seguro, y para el resto del proyecto, si viene un desarrollador y por errores, pon algo aquí, esta prueba siempre capturará este tipo de errores y nos aseguraremos que esto nunca suceda dentro del proyecto. 18. Definición de cobertura de código y su importancia: Hay un concepto importante en las pruebas automatizadas, que se llama cobertura de código, y la cobertura de código muestra cuando ejecutamos la prueba cuántas líneas de nuestro código se probarán con la prueba. Entonces si tengo, por ejemplo, un archivo que contiene 100 líneas de código, y voy a añadir algunos casos de prueba. Y estos casos de prueba, cuando se ejecutan, solo ejecutan 60 líneas de esta línea al 100%, significa que la cobertura del código es del 60%. Y la cobertura del código nos muestra nuestras pruebas, cuánto son buenas nuestras pruebas. Entonces, si tenemos una cobertura de código alta, significa que la mayoría de las líneas de nuestro código estarán cubiertas con la cobertura del código. Y si no tenemos este valor, entonces demuestra que en realidad nuestras pruebas no están cubriendo tanto. Entonces significa que podemos tener alguna caja y algunos cambios. Y debido a que no hay pruebas que realmente ejecuten esa parte de los códigos, nuestro software es posible tener errores y caja. Oh, espero que puedan obtener el tema de cobertura de código yo aquí voy a escribir haga clic en este elemento, y tengo otra opción que es ejecutar cargando la prueba el TA seis con cobertura. Si no estás usando webstore, también puedes ejecutar esto dentro la terminal con un comando R test coverage Y lo que hace esto es que ejecutará todos los archivos de prueba y además calcula la cobertura. Y aquí tenemos diferentes valores, STMT. Muestra el enunciado, las ramas, las funciones y las líneas. Este centenar significa que significa 100%. Entonces demuestra que en realidad todo nuestro código ha sido cubierto. Y esto está aquí, correcto porque nuestro componente es sencillo y solo podemos tener una línea de código. Entonces esto demuestra que cuando agregamos esta prueba, cuando se ha ejecutado esta prueba, han ejecutado todas las líneas del código y así obtendremos una cobertura del 100%. Y cuando ejecutes este comando, también verás una cobertura para ahí, y esto te dará un formato de reporte LCV Y ahí dentro, tengo un índice en HtmmFle. Puedo ejecutar esto, que lo abre dentro del navegador. Y aquí también puedo ver la cobertura del código. Y aquí verán por el enunciado, por las ramas, por las funciones, y por las líneas. Tengo el 100%. Solo hay una línea, una línea de una línea ha sido cubierta. Esto también es correcto para las funciones, y no tenemos sucursales, así que no hay yo y eso en base a eso, código se ejecuta de manera diferente, y teníamos dos declaraciones y las dos también se ha cubierto. Y ¿cuál es la diferencia entre una declaración? A líneas es que puedo tener múltiples declaraciones en una línea. Entonces si empiezo a escribir algo como esto En realidad, esta es una declaración de tres, pero se ha escrito dentro de un solo archivo. Y esta es también la diferencia entre una declaración y líneas. 19. Migrar el proyecto a Vite: Como recuerdas, tuvimos un problema con nuestro after TS six para que cada vez que ejecute la prueba aquí, obtendré un error respecto al eje y dice que no se puede importar. La razón detrás de eso realidad estamos usando la sintaxis del módulo ES en este proyecto, pero create react up por defecto se ha configurado a un formato de movimiento Jz común, y esto crea un problema Y para ordenar resolver este problema, quiero migrar el proyecto de create react hasta IT. Y que es una herramienta que la API es exactamente similar a JS y podemos ejecutarla para construir nuestra app y también ejecutar la prueba. Así que vayamos y actualicemos nuestro proyecto para usar Wt. En primer lugar, voy a eliminar scripts de reacción. Y luego voy a agregar Dev wt. Entonces lo estoy instalando como un patio de dependencias de desarrollo. Y después de eso, necesitamos crear un archivo confict para el WD Entonces voy a crear un archivo y voy corregir con ese conf dots, y voy a poner este valor aquí Así que estamos importando react y define config, y también vas a importar el plugin react. Y para aquí, también necesitamos instalar con JS plug in react. También voy a ir a la terminal e ir estás en eso es en medio de Js slash plug in R. Ahora, también tenemos esta dependencia y vamos a ir a nuestro paquete archivo JSON y también vamos a actualizar nuestra dependencia Entonces reemplazaré la compilación en lugar de reaccionar grito, usaremos What field y en vez de test, también usaremos WIT test y eliminaré el script inject y para el inicio, solo escribiré ingenio Con también se necesita tener un archivo ML índice dentro de la raíz del proyecto. Así que vamos a crear un archivo index y pongamos este valor de este HTML dentro de eso. Y también iré y llamaré a este updatsx uno porque dentro de nuestro SOC, tenemos hasta Ts seis así que vayamos a terminal y agreguemos con run dentro de nuestro paquete start Ahora el ingenio se está ejecutando, así que veamos el uso de 51732 como oportunidad para esperar que algunos nos dejen también en el dash dash host aquí Y vamos a correr como comienzo R. Ahora podemos ver nuestra app porque no tengo no solo ejecutándose, así que también necesitamos ejecutar nuestro backend vamos también a una terminal y vamos a la app del servidor y dejemos que ejecutemos nuestro servidor Y ahora voy a refrescar la página, así que también debería poder ver el proyecto. En realidad, esto lo siento, esto es un error que debería haber dado al indexar HTML nuestro índice t65 Esa es nuestra app. Así que déjanos que soy perfecto. Ahora tenemos esto y debido a que se ha cambiado el puerto del proyecto, anteriormente, volvemos a ver el tema CORS Entonces cambiemos la configuración de WIT para ejecutar el puerto de los 3,000. Y para hacer eso, voy a esa configuración esa configuración. Y aquí voy a agregar un servidor de parámetros, y para el puerto, iré con 3 mil. Así que vayamos y volvamos un 3,000. Bien, perfecto. Ahora tenemos nuestra app, y estamos usando WIT para ejecutar nuestra aplicación. 20. Ejecuta pruebas automatizadas con Vite: Y ahora vamos a configurar qué ejecutar nuestro archivo de prueba. Migramos nuestro proyecto a WIT para poder ejecutar nuestro archivo T six superior Así que vamos a instalar las dependencias para probar qué. Entonces necesitaremos test, necesitamos testing, library react, y también necesitamos testing library JS dum, y también necesitamos el Sum. Uh Bien, no debería escribir malas hierbas, pero sí, para comenzar la dependencia. Y ahora instalamos las dependencias. Así que vayamos a nuestro archivo W dot comf Ts y agreguemos una sección para la prueba Y para las pruebas, vamos a agregar set the global a dos, y nuestro entorno será entorno JST que la prueba está pasando, y vamos a crear un archivo create one setup Lo llamaremos, setup eso es Ts, y vamos a excluir también test algunas carpetas que no queremos que se excluyan para eso, vamos a mantener los valores que ya existían y vamos a agregar todo desde dentro de una carpeta test. Ahora necesitamos crear este archivo de configuración así que vayamos y llamemos llamémoslo pruebas de configuración para ser más. Aquí. Y también cambiamos este conjunto de prueba. Y aquí necesitamos importar bibliotecas de pruebas. Entonces voy a poner aquí este valor. Vamos y déjanos esta vez, tratar de ejecutar la prueba. Así que agreguemos también los comandos para ejecutar la prueba. Vamos a nuestro paquete, Jason. Y aquí para la prueba, voy a escribir V test run. Y también agregaremos otra opción para ver, que cada vez, si se ha cambiado el archivo, queremos volver a ejecutar la prueba. Y con eso, también podemos agregar otro comando. Así que hagamos la prueba. Y perfecto. Como puedes ver ahora, esta prueba sigue fallando, pero no vemos el error relativo al eje porque la prueba se ha configurado correctamente. Y a partir de ahora, también puedo ejecutar esta prueba y se puede ver que tengo esta prueba es en realidad, puedo ejecutar la prueba. Está fallando porque no tengo reaccionar. Vamos y por ahora, puedes ignorar esta prueba porque vamos a reescribir la prueba en el futuro Pero por ahora, solo quería corregir el error con el eje. En el siguiente video, voy a escribir prueba para el último componente que tuvimos. 21. Prueba de escritura para el componente de lista: Entonces, continuemos nuestro trabajo escribiendo pruebas para el componente de lista. ¿Y qué hace el componente de lista? El componente list usa la consulta TNSA, y dentro de la consulta Tan SA, tenemos la función de consulta que llamamos axius Llamamos a la APA a través del eje y luego leemos los datos. Y si los datos aún no se han resuelto, devolverá un componente de carga. Entonces, escribamos una prueba para esto. Déjame ir a la carpeta de pruebas. Vamos a crear un archivo, llamémoslo prueba, enumeremos la prueba. Y aquí voy a agregar un registro de descripción para el componente de lista. Y dentro de mi prueba, diré que debería renderizar una carga si la API aún no se ha resuelto. Y aquí voy a renderizar mi componente de lista. Y vamos a importar render de testing library y también dejemos renderizar. ¿Y qué es el componente de carga? Se trata de un párrafo que sólo muestra una carga. Así que vayamos e importemos una pantalla. Y voy a decir una pantalla que esperan y cargando para estar dentro del documento. Es una prueba sencilla y vamos a ejecutar la prueba. Y verás que la prueba está fallando y dice, Ninguna línea cuérica dice, Ninguna línea cuérica dice, usa QuerclinePvider Y por qué sucede esto Porque si miramos el t65, envolvemos toda la aplicación con el proveedor de gravámenes quéricos, y también deberíamos hacer esto dentro de nuestro Entonces voy a crear una función que nos da vamos a envolver esto dentro del proveedor cliente de consulta. Y para el clin, solo usemos esto. Y ahora necesitamos crear un cliente. Debido a que quiero ejecutar esta prueba varias veces, vamos a crear una función que nos dé un cliente de prueba. Entonces lo llamaré prueba de invitado, prueba déjanos llamarlo G query cliente. Y dentro de eso, vamos a usar el cliente principal de TansaQernW Y para ello, voy a llamar a esta función. Esto devolverá como un nuevo objeto, que es el cliente de consulta y lo he envuelto dentro tengo mi componente de lista dentro de la cline de consulta proporcionada También especificaré una opción aquí. Tan SA query tiene un parámetro que se llama retroy. Y esta es una característica realmente útil que si tu API no devuelve una respuesta por primera vez, la consulta de TNA intenta ejecutar la llamada a la API, y por defecto, la hace tres veces Y si en el tercer momento, la respuesta se obtendrá de la API entonces te mostrará la respuesta. Y porque ahora estamos probando y en realidad no nos interesa la API y no la estamos probando con los datos reales, deshabilitaré esta opción para que nuestra prueba sea más rápida. Entonces voy a ir y voy a establecer la opción por defecto. Y aquí tengo un esquema de consulta, y dentro de esto, configuraré el reintento rápido Y lo que hace esta opción es en realidad, dice a rea query que si la primera vez se le ha fallado, entonces no es necesario volver a intentarlo Así que ahora volvamos a hacer nuestra prueba, y perfecto. Ahora nuestra prueba ha fallado. Asegurémonos de que en realidad estoy probando lo correcto. Entonces agreguemos otra G aquí. Ahora esta vez la prueba debería fallar y buena. Y ahora estoy seguro de que en realidad mi prueba se está ejecutando y hace la prueba que en realidad pruebo lo que me gusta hacer. Ejecutemos aquí la cobertura y veamos nuestro reporte de cobertura de código. Y verás que necesitamos otra dependencia para la cobertura del código. Anteriormente, estábamos usando por defecto estaba proporcionando. En el siguiente video, voy a configurar la cobertura V ocho para los más húmedos 22. Cómo generar un informe de cobertura de código con V8: Entonces, para resolver este problema, necesitamos agregar la dependencia del V ocho para la herramienta de cobertura. Entonces lo instalaré con este comando, R D. Y esto será una dependencia de profundidad, así voy a usar solo D. Y el paquete será cobertura de prueba V ocho. Y después de eso, vamos a nuestro archivo t dot cofi TS y dentro de la prueba, agregaremos una sección para la cobertura Y estamos diciendo que nuestra cobertura para herramientas más amplias será Vt. Y volvamos a nuestra prueba y vamos a ejecutarla con cobertura. Y ahora verán que ya no veo ese error. Si no estás usando tienda web y quieres tener un comando para ejecutar la cobertura, también podemos agregar eso a nuestro paquete el archivo JSON. Puedo llamar a esta prueba con cobertura. Y luego aquí después de que hagamos pruebas, también voy a dar opción de cobertura. Y de esta manera, puedo correr dentro mi terminal, cobertura de prueba R. Y ejecutará todas las pruebas, y además calcula la cobertura del código para una de ellas. Entonces el archivo Dot de la aplicación está fallando. Eliminemos esta prueba por ahora para que quede limpia. Así que vamos a correr. La prueba, de nuevo, increíble. Mis dos pruebas han sido ejecutadas, y ahora también podemos obtener la cobertura. Vamos a ver el reporte de cobertura. Tenemos la carpeta de cobertura, y si yo aquí, voy a ejecutar el índice punto HTML cinco. Voy a ver esto dentro de mi SRC para hacer. Para la carga, tenemos una cobertura del 100%, pero para la lista, solo tenemos 35. Y como pueden ver, esta X muestra que estas líneas de código se han ejecutado durante mis pruebas, pero estas líneas rojas no se han ejecutado. Y esto es exactamente porque solo agregamos una prueba para esta línea. Así que vayamos y agreguemos una prueba para las líneas restantes de códigos. 23. Cómo aumentar la cobertura del código de ListComponent al 100 %: Entonces para escribir una prueba, en realidad voy a copiar toda la sección, y voy a agregar una prueba y aquí renderizo tabla con datos de la APA, con dos do de la APA. Y con el fin de probar realmente, porque primero vamos también esta parte del código es similar. Así que vamos a crear una configuración aquí y pongamos todo aquí. Um, en vez de esto, llamemos a la configuración. Y asegurémonos de que hasta ahora no rompí nada, así que vamos a correr toda la cuadra y funcione. Ahora, queremos agregar la prueba para la tabla, y aquí necesitamos burlarnos realmente de la llamada a la API exxus Debido a que no queremos ejecutar nuestro back end esto será parte de las pruebas unitarias y las pruebas de integración. Aquí puedo hacer eso por punto Mg y luego voy a usar esto como exxus y vamos a importar de prueba y ahora vamos a definir una variable como un axius marcado Dot Mg dirá que dentro de las pruebas, no queremos usar AXS en sí, sino que queremos usar axius una versión marcada del axioso que nos permita manipular los datos que Lo mapearé como esa MKEDFunction. Y porque estamos usando TypeScript, así que voy a lanzar esto a esta función, lo que puedo decir que siempre que se haya llamado a axis, no quiero que en realidad se llame API, quiero que se escriban datos específicos Para ello, vendré aquí y diría marcar eje punto Marcar Implementación. Bien. También puedo usar valor de resolución. Y quiero decirle a Axios que siempre, si te han llamado, por favor devuélveme una promesa que se resolverá a un valor Y qué valor estoy esperando porque voy a leer un objeto que tiene una clave de datos, y esta será una lista de por hacer. ¿Cuáles son los que estamos regresando? Voy a definir un objeto que tiene un dato, y estos datos serán una matriz de los que hacer. Voy a definir una muestra para hacer aquí, por ejemplo, Cs a hacer, que será un tipo de hacer, y voy a definir esto como ID sería uno, por ejemplo, título será hacer y es importante, falso y ha hecho también falso. Y con esta línea, estoy diciendo que cada vez que se haya llamado a la s, por favor no llames a la API, solo dame una promesa que se resolverá a este valor. Y después de eso, estoy seguro de que esta línea cuando se haya terminado la carga, puedo pasar por alto esto yo y tengo una matriz, y puedo mostrar esto. Hagamos esta prueba, y espero que falle. Lo siento. Bien, todavía está en la carga. Así que vayamos y cambiemos esto que en realidad esperamos que la descripción esté dentro del documento. Y aquí estoy esperando que falle porque la primera vez que cuando ejecutemos el componente, será no lo hace está en el estado de carga. Y hay una función auxiliar en la biblioteca de pruebas de reacción, espera a que podamos esperar hasta que pase algo. Y cómo podemos asegurarnos de que tenemos bypass este enlace, si la tabla está renderizando, entonces estoy seguro de que esto se ha hecho. Entonces, si espero a que exista la descripción dentro del documento, estoy seguro de que la carga se ha establecido false y este código en realidad se está ejecutando. Entonces voy a poner esta línea como condición dentro de mi espera. Y voy a decir que quiero esperar hasta que esta descripción esté dentro del texto. Y cuando esto pasó, porque estoy diciendo que estoy devolviendo un todo, estoy esperando que el título de identificación esté dentro del documento. Por lo que estoy esperando que el DNI del uno y también el título del todo esté dentro del documento. Entonces, hagamos esta prueba y dejémonos yo también debo agregar un Avate aquí para asegurarnos que esto va a esperar hasta que esto suceda Y debido a que agregué evate necesito cambiar esta prueba para que sea una función ASN Así que vamos a probarlo de nuevo y perfecto. Ahora mi prueba está pasando. ¿Y qué hace esto? En realidad, espera hasta que esta descripción existirá dentro del documento, y entonces estamos seguros de que esto y si cambio esto, por ejemplo, para hacer ejemplo, asegurémonos de que estamos probando algo correctamente Entonces ahora verán que está fallando. Se renderiza una tabla. ID está aquí, pero el texto es para hacer ejemplo. Entonces puedo cambiar esto, y ahora la prueba está pasando. Realicemos juntos las pruebas posteriores. Y también veremos advirtiendo aquí que cada lista debe tener una propiedad clave. Arreglemos esto también. Esta es una Esta es la reacción que espera porque sabemos que el ID es único, déjanos como agreguemos una propiedad clave y hagamos que esta sea única. Leamos ejecutar la prueba. Fresco. Ahora, ambas pruebas están pasando. Ejecutemos el reporte de cobertura y veamos el reporte de cobertura de código. Voy a reemplazar toda la herramienta de cobertura anterior y vamos a refrescar este higo y maravilloso. Ahora también tenemos 100% de cobertura de código y estas líneas del código que antes se leía ahora se está ejecutando. 24. Introducción al manejo de errores de API: Hasta ahora, tenía esta suposición de que mi API está funcionando y no trabajamos en el manejo de errores. En este video, te voy a mostrar cómo podemos manejar los errores mediante una consulta. Permítanos refrescar la página y como pueden ver, tengo estos dos artículos y vienen de nuestro servicio no JS. Vamos y tratemos de simular un error. Aquí abrí un front-end y tengo dos ventanas, y esta es la otra windows es para la app del servidor. Aquí voy a presionar Control C y voy a matar el proceso del servidor. Veamos qué va a pasar. También voy a inspeccionar en esta página y voy a ir a la etiqueta net org para ver qué va a pasar y luego voy a refrescar la página. Como puedes ver aquí, la solicitud, la API llamada para los dos dos y el puerto 8,000 está fallando. Esto es algo realmente interesante de rea query que como puedes ver no se rinde en el primer fracaso. Tiene un mecanismo incorporado para reintentar, verás que la primera vez fallará y la segunda vez fallará y la tercera vez fallará La primera vez, esta es la última vez que está intentando y luego se le falla. Si voy y verás que toda la página va a los blancos. Sentémonos juntos de nuevo. Mientras estas solicitudes estén fallando, verá que todavía está en la finca de carga. Tengo mi página y cuando se haya terminado el último reintento y rea Query está segura de que la API tiene un problema y no puede resolver la respuesta, fallará Veamos la consola y se puede ver que aquí tengo un error y el error de tipo de corte no puedo leer propiedades de filtro de lectura indefinido, y esto está sucediendo en el progreso a TA seis. Y como puedes ver, voy a llamar al filtro y debido a que la API no devuelve una respuesta, este filtro, los datos están indefinidos y este filtro no puede llamarse el tipo de undefined. Así que arreglemos este error juntos. 25. Manejo de errores de API: Para arreglarlo, voy a abrir el ID y voy a nuestra app Tud y déjanos ir a abrir nuestro componente de progreso Y aquí, tenemos los datos y tenemos el Is cargando. Y el apartheid de la Is cargando, consulta Rea también nos proporciona una bandera, que se llama IRO. Y también voy a agregar eso aquí, y voy a ir aquí también estoy copiando esta línea y voy a agregar algo similar. Diré si esto es error flag es cierto, voy a devolver un párrafo y solo estoy diciendo que hay un problema de cargar los datos. Lo que hace esto es cuando rea query ve que hay un problema con la API, también establece un error de facilidad en true. Y también podemos y también tenemos un objeto error, que esto también devuelve, y esto es un Bollan y este es un objeto, y esto también contiene los datos que están relacionados con el error Así que agreguemos también un registro de consola para eso. Entonces voy a en una consola punto log por el error, y luego voy a devolver un programa que dice que hay un problema de cargar los datos. Vamos a nuestra app y refresquemos la página y veamos qué va a pasar. Como puedes ver, esto todavía está en la carga, por lo que verás este reintento, reintento, reintento, y ahora en realidad está fallando Y verás que hay una consola como el error, que son los errores de acceso, y esto está sucediendo que esto está relacionado con el error de red porque nuestra API ya está muerta. Entonces hay un error de red, y estos son los rezagos de consola que se ha sucedido Y por qué no se ha arreglado porque ahora tenemos otro tema en lo importante que hacer. Entonces esto también está ahí. Entonces voy a voy a poner eso ahí también, así como cargando, puedo crear un componente y lo llamaré error. Error, por ejemplo, error o cuadro de error. Porque no quiero copiar cada vez lo mismo. Voy a por el progreso, voy a devolver este párrafo que he creado y ponerlo dentro de este JSX Por defecto, voy a exportar este componente aerobax y aquí dentro de mi progreso, no necesito el registro de consola así que lo eliminaré Sólo voy a devolver mi componente aerobax. También necesito importarlo. Como vimos, también tenemos esto dentro de nuestros importantes componentes de tatuajes. Voy a copiar esta línea y tampoco necesitamos el error real aquí. Yo sólo voy a usar este lingote, pero por dentro es importante También voy a agregar esta línea y también necesito esta bandera. También lo voy a agregar aquí desde el valor de retorno del resultado qua. Sentémonos juntos. Vamos a la consola y refresquemos la página. Verás la red por fallas y tenemos cuatro veces rearis en la última vez que estoy esperando ahora voy a ver otro lugar que tenemos también lista componente Entonces aquí también estamos llamando al mapa en los datos y vamos a listar componente y vamos a agregar también el techo aquí y vamos a agregar también. Ahora vamos a refrescar la página. Y maravilloso. Ahora, verás que lo volverá a adquirir dos veces y después de fallar, noob, tenemos todos estos componentes de caja de error y nuestra app sigue funcionando, pero también estamos manejando la situación de que la API está regresando no responde o no o no 26. Simulación de una API lenta: En el último video, hablé de una situación que la API está manejando está arrojando un error y la API no está disponible. Pero qué pasa si, por ejemplo, nuestra API, en algunos casos es lenta, y, por ejemplo, tardará tres o 4 segundos hasta que salga la respuesta. Cómo podemos crear una buena experiencia de usuario para estos casos. Y para poder hablar de eso. Vamos a nuestra aplicación de servidor. Y aquí, iniciemos primero el servidor. Entonces si inicias el servidor, entonces volvemos. Si actualizo la página, ahora tengo mi lista y la API está respondiendo. Pero voy a hacer algo. Quiero simular API lenta. ¿Y cómo puedo hacer eso? Voy a crear una función de retardo. Y lo llamaré delay que acepta un número basado en los milisegundos y realidad devolverá una promesa y esta promesa se resolverá después de esta cantidad de milisegundos También necesito agregar un igual aquí. ¿Qué hace esta función ? Técnicamente, nada. Es solo una promesa que espera hasta que pase esta cantidad de milisegundos y luego se resolverá Aquí voy a dentro de mi post, que es relativo a la adición de nuevo que hacer. Voy a la primera línea, voy a llamar a esta función delay. Pasaré por ejemplo, 3,000 milisegundos, que son tres segundos y voy a agregar peso para esta función Voy a añadir un peso. Cuando agrego un peso, entonces las funciones deberían ser acing también agrego teclado acing aquí. Y al hacer esto, en realidad estoy implementando un retraso de 3 segundos para una API. Así que cada vez que estamos llamando a la creación también enviando una solicitud de publicación a una barra todos, esta función no se ejecutará inmediatamente Primero arranco tres segundos y luego se ejecutará. Detengamos nuestro servidor y empecemos de nuevo con estos cambios y veamos qué está pasando. Voy a ir aquí y dejarnos abrir también nuestra red para ver qué está pasando. Voy a refrescar la página. Y ahora voy a crear un nuevo artículo. Lo llamaré nuevo ítem, y por ejemplo, también pondré las dos casillas de verificación y presionaré este botón Como puedes ver, esta API no se ha resuelto hasta ahora y veremos claramente un retraso de 3 segundos y déjanos hacerlo de nuevo. Y verás que esta tabla está esperando hasta se resuelva la API y para empeorarla aún más, cambiemos esto a 7 segundos y reiniciemos nuestro servidor. Llamemos a este nuevo ítem tres, como puedes ver, usuario presiona este botón y no pasó nada porque la API es lenta y es un poco confusa para el usuario porque no sabe si la API ya ha sido llamada o no ha sido llamada o qué está pasando. Intentemos de nuevo y tal vez comencemos a presionar varias veces y como puedes ver, porque el usuario está confundido, entonces se han creado todas estas llamadas a la API. Y esto es algo que como desarrollador front-end y como alguien que quiere crear una buena experiencia de usuario, debemos enfocarnos en ella y debemos resolverla. Entonces hagámoslo juntos. 27. Cómo manejar comunicaciones lentas con API: Como vimos en los videos anteriores, una consulta de uso volverá es el indicador de error de carga, que podemos usar para ver qué está pasando con el frío APR. Exactamente así, cuando vamos a crear un post, la mutación que estamos usando también tiene alguna bandera de estado, y re aquery nos la da Y vayamos a nuestro componente de creación. Y aquí verán que teníamos esta forma, que como título es importante, y estos son los armadores para este cuatro Y aquí está el lugar al que en realidad estamos llamando la API. Entonces estamos usando la mutación de uso de re aquery y estamos pasando una función de mutación, que es el post a la llamada API con este parámetro, y en caso de éxito, vamos a invalidar nuestras consultas Cuando la API es lenta, y tengo el formulario aquí. Quiero desactivar este botón siempre y cuando esta llamada a la API esté en curso. Y esto es realmente fácil con rea query porque esta mutación que se devolverá de rea query tiene esta bandera. Entonces aquí, puedo venir fácilmente y puedo un atributo de deshabilitar. Dije, si mi si crear mutación todo es ensayo independiente, quiero que este botón sea desactivado Sentémonos juntos. Déjame refrescar la página y dejarme limpiar mi red. Voy a crear un nuevo ítem con el número cinco y voy a presionar esto. Como puedes ver, este botón ahora está deshabilitado, por lo que no importa si el usuario lo presiona y es claramente el usuario entiende que algo está sucediendo. Sentémonos juntos y presionemos sobre esto. Entonces verás que el botón ha sido deshabilitado y no hay ítem, el momento en que se haya resuelto esta solicitud de red, este ítem está aquí y el botón se vuelve a activar. Maravilloso. Podríamos lograr fácilmente una buena experiencia de usuario solo con la ayuda de la consulta TSA 28. Manejo de los errores de mutación de la consulta TanStack: Pero el único manejo del estado pendiente no es suficiente. Entonces porque por ejemplo, vayamos a nuestra aplicación de servidor y volvamos a intentar matar al servidor y veamos qué pasará si nuestra APO no es alcanzable y no está disponible Entonces voy a crear un nuevo ítem siete. Y quiero en este video discutir sobre el manejo de errores. Voy a presionar Crear todo, y como pueden ver la red ha sido fallida, pero no hay nada que le estemos mostrando al usuario. El usuario no experto no trabaja con la consola de desarrollo. Ellos vienen aquí y están presionando este botón y ven que no pasa nada y se estarán preguntando por qué es así. Para solucionarlo, vayamos a nuestra aplicación cliente. Y como está pendiente, también tenemos una bandera de que si la mutación falla, nos lo devolverá. Voy a usar la mutación y la bandera se llama es error. Aquí, como exactamente lo que hicimos en el video anterior, voy a renderizar un componente de cuadro de error. Entonces, si nuestra mutación falla, entonces esta condición será verdadera y renderizarán los componentes de una caja de error. Veamos juntos, y como pueden ver, ahora esto ha estado aquí. Si presiono este botón, vayamos y volvamos a iniciar el servidor, si vuelvo a iniciar el servidor, el a hacer será lista de dos ítems. Vamos a refrescar la página, y ahora está funcionando, así que voy a agregar un nuevo ítem voy a crear todo. La API es lenta, por lo que este botón va a la desactivación. Tomará algún tiempo, 7 segundos y ahora tengo esto y déjanos ir y detengamos el servidor. Esta vez, vayamos y creemos de nuevo un nuevo artículo. En el momento en que presiono este botón, tenemos esta retroalimentación que muestra que hay un problema de los datos de carga. Verás con el poder de la consulta TSA, ¿cómo se pueden manejar fácilmente las cargas de error y cómo podemos crear fácilmente una buena experiencia de usuario para nuestros 29. Profundizar en las claves de consulta: En esta conferencia, quiero discutir más detalles sobre las claves de consulta y sobre claves de consulta y sobre por qué es importante una clave de consulta en la consulta de tensa Voy a hablar de por qué es importante usar una clave estable y descriptiva para la eficiencia en el almacenamiento en caché, y también te voy a mostrar algunas de las trampas comunes que está las trampas comunes que está sucediendo relacionadas con las claves de consulta, y este es uno de los errores más comunes que he visto, que está sucediendo en muchos proyectos de reacción, y te voy a mostrar cómo puedes evitarlo Y al final, también voy a hablar un poco sobre qué podemos hacer cuando se están recogiendo los datos que es que tiene algunos parámetros Por ejemplo, cuando tenemos una paginación, cuando tenemos filtros, y por ejemplo, tenemos un punto final de búsqueda y el punto final de búsqueda tiene un filtrado Así que comencemos. ¿Qué es una clave de consulta? Una clave de consulta es un identificador único que rea query usa para administrar cada pieza de los datos que está obteniendo Entonces si, por ejemplo, si tenemos una llamada APO que devuelve una lista de usuarios, podemos tener una clave de consulta que está asociada a esa llamada API. Una consulta utiliza esta clave como un identificador único para esa parte de los datos. Y una clave de consulta puede ser una cadena o puede ser una matriz. Y la forma recomendada por la documentación de la consulta Tan SA es usar una matriz. Si tienes un parámetro, por ejemplo, si estás obteniendo la lista de los usuarios y quieres tener una consulta para esto, entonces puedes usar un solo valor tan fuerte como los usuarios. Pero la recomendación es que siempre debes usar una matriz porque es más fácil de leer y también es consistente. Es una manera consistente. Y como recuerdas, en nuestro proyecto, también creamos una consulta para la lista de todos para esa consulta, también utilizo una matriz incluso cuando la clave de consulta es solo una. Y Rea query utiliza esta clave para entender si los datos que quiere recuperar ya están en caché Como recuerdas cuando te mostré en la solicitud de red, cuando ya tenemos los datos para la consulta de todos y rea sabe que los datos existen, usará fetch una versión en caché en lugar de volver a buscarla . Y también utiliza esta clave de consulta para la invalidación y actualización y actualización de esa parte de los datos Ayuda a tsa query para evitar solicitudes de red innecesarias 30. Qué es una clave de consulta: Veamos un ejemplo de una consulta. Como recuerdas, esto es lo que hemos hecho en nuestro proyecto. Estoy aquí definiendo datos es carga es error, y voy a crear una consulta con consulta de uso desde Tanosa query Estoy pasando dos parámetros, uno es la clave de consulta y el segundo es query FN, que es una función de consulta que se ejecutará este hook será invocado Y la clave de consulta es que he usado un valor constante para la clave de hacer, que es hacer. Y como ve aquí, incluso cuando este es un valor, he usado una matriz porque esta es la forma recomendada recomendada de usarlo. Y hablemos de la importancia de las llaves de sable. Verás aquí incluso cuando este sea un valor, he usado una matriz para eso, y esto es porque esta es la forma recomendada asignar siempre una matriz a la consulta. 31. Mejores prácticas de clave de consulta: Entonces hablemos de las mejores prácticas para las claves de consulta. Como mencioné anteriormente, siempre use arrays y no una cadena. Incluso si tiene un valor para la clave de consulta, por ejemplo, los usuarios a hacer siempre lo usan como una matriz, crear una matriz con un solo elemento y poner esta cadena como el primer elemento de la matriz. Y lo segundo importante es mantener siempre las claves serializables Así que usa primitivas como números de cadena y evita estructuras de datos complejas como funciones y objetos porque no son serializables Y también usa la clave anidada para el alcance. Por ejemplo, si tenemos una API V devuelve, usuarios activos, y el otro API Vturns usuarios inactivos, podemos tener una clave de consulta de una matriz que el primer elemento es usuario y el segundo elemento está activo para representar la obtención de los usuarios activos Esta clave anidada ayuda a otros desarrolladores a entender el código más fácilmente y también nos da un mejor alcance Y el siguiente punto es que puedes usar este caso de consulta en la invalidación Siempre asegúrate de que solo estás invalidando esa parte de la caché que está relacionada con la parte de la implementación que estás haciendo Entonces aquí verás que tengo una línea de código, clave de consulta que invalida las consultas Y con esta línea de código, estoy pidiendo a Tens query que invalide los datos que previamente ha cacheado y llame a la API y vuelva a buscar la Y aquí estoy pasando una clave que es un array y el primer elemento es user y el segundo elemento es useri Entonces aquí estoy invalidando un solo objeto. Es porque la API que está relacionada con esta llamada devolverá los datos de un usuario. Si paso, por ejemplo, invalido consultas y paso la clave de consulta como usuarios, entonces estoy invalidando a todos los usuarios, lo cual es completamente innecesario Siempre use las claves en invalidación de consultas de manera adecuada que invalide solo esa parte de los datos que ya no la necesita El último punto es que en realidad, también podemos una de las mejores prácticas es parametrizar claves para el filtrado y Por ejemplo, como puedes ver en el ejemplo, tengo una clave de consulta y el primer elemento es una cadena S, que es el post. Pero la API que está relacionada con este post siempre tiene paginación y también proporciona algún filtrado Para almacenar en caché esto correctamente, también estoy pasando la segunda parte como un objeto para página y filtro. Estoy creando un complejo de array, el que se plantea el primer elemento y el segundo elemento es un objeto de la página y relleno. Pero en este ejemplo, la página es solo un número y el filtrado es una cadena. Recuerda la segunda mejor práctica que dije, usar tipos primitivos para ellos como números y cadena. Y aquí en este ejemplo, yo también soy ellos también son primitivos y con esto, me estoy asegurando de que estoy guardando en caché, por ejemplo, la segunda página del post Si tenemos un usuario que va a la segunda página y usamos tensa query para obtener los datos, ahora tenemos la segunda La clave que hemos definido aquí tiene el post y también la página es parte de la clave de consulta. Ahora la consulta de Testa sabe que tiene el post para la segunda página Si el usuario va a la primera página y luego regresa a la segunda página, entonces usa los datos de caché y puede evitar llamadas innecesarias a la API. 32. Errores comunes: Como última sección, quiero hablar escollos comunes y errores comunes que está ocurriendo cuando generalmente los desarrolladores trabajan con decenas de Aquery El primer problema común es como si estuvieran usando objetos y función en teclas, y provocará que decenas Equery tenga múltiples entradas de caché segundo error común es que están cambiando la clave involuntariamente, y nuevamente, resultará en errores de caché y a veces los datos ya están ahí, pero debido a que la clave no coincide, Tansaquery no puede encontrarla dentro, El tercer error es usar la misma clave para diferentes consultas. A veces por error, un desarrollador definió la primera consulta, que es buscar la lista de los usuarios, y otro desarrollador viene e intenta usar el mismo código Entonces comenzó a hacer frente y pegar y luego es para comenzar a cambiar el código API, pero se olvidó de cambiar la clave de consulta de los usuarios, por ejemplo, a publicaciones Ahora en esta situación, hay dos consultas y ambas están mapeando a la misma clave, y se resolverá a datos incorrectos e instalará un estado de la caché. 33. Introducción para la edición de elementos pendientes: Todo bien. Ahora que hemos implementado el manejo de errores para nuestra aplicación y podemos manejar conexiones API lentas o algo sucede con la API, vayamos y mejoremos más nuestra app. En esta serie de videos, ahora queremos implementar la funcionalidad de edición. Hasta ahora, tenemos una lista de las cosas por hacer y podemos crearle un ítem, pero no podemos editar el ítem. En este video, voy a implementar la funcionalidad de edición, y vamos a profundizar con mutaciones y cómo podemos usar mutaciones para editar y para eliminar entradas de hacer lista. Para implementar la funcionalidad dis, he creado un nuevo componente que es dis model. Veamos juntos este componente. Tenemos estas piezas, tenemos nuestro JSX, y he usado modelo de react con correa aquí dentro del modelo, tenemos el header Y dentro de la cabecera, tenemos las ediciones que hacer, y la forma es la misma forma que teníamos de la creación La única diferencia es que aquí agregué algo de valor, que es el valor predeterminado cuando se abre el formulario. Porque cuando teníamos que hacer el create, el formulario está vacío, así que no necesito este valor. Pero cuando estamos editando para hacer, es una buena experiencia de usuario mostrarle al usuario qué está editando. Y así agregué el valor y comprobé el atributo. Estos valores provienen de una propiedad que viene de aquí. Entonces para este componente, he creado tres propiedades. Uno es el show, que es un booleano que muestra el pop up si el modelo debe mostrarse o Hay un modelo de show set, que es un set state de react y lo vamos a pasar al componente. Entonces, cuando, por ejemplo, el usuario presiona el cierre de este modelo, entonces el modelo debería desaparecer. Y vamos a pasar un objeto, que es el dos a cuatro editar, que es de los dos a escribir. Y para los dos a cuatro editar es en realidad el objeto que el usuario quiere editar. Por ejemplo, si quiero editar esto para hacer, será el primero, para que esto haga, será el segundo. Como puede ver, las otras partes del código es similar a establecer crear para hacer. No eliminé la sección. Hemos puesto título, conjunto importante, todo. No cambié estas partes porque lo haremos juntos. Esta parte fue solo porque era solo JS y HTML, yo creé esto. Y ahora vayamos y agreguemos aquí un botón edición para que podamos tener la posibilidad de editar los dos. 34. Implementa el modal para mostrar los detalles de las tareas pendientes: Para poder agregar los dos primero déjame agregar también es importante porque aquí veremos la descripción. Veremos que lo ha hecho, pero no vemos es importante. Vamos a nuestro componente create para listar componente y tenemos aquí una tabla. Tenemos esta casilla de verificación, que está relacionada con ha hecho y también puedo simplificar esto cerrándola así Voy a añadir otro elemento de forma para el y en realidad es importante es el primero, así que voy a cambiar esto a es importante. Veamos la tabla también necesitamos agregar el encabezado, así que también voy a agregar el encabezado es importante. Y ahora es mejor que cada uno lo haga, puedo ver también es importante y también tiene. Ahora queremos tener un análisis de función de edición, así voy a agregar un encabezado aquí y lo llamaré editar aquí vamos a agregar un elemento TDF y para cada uno, voy a agregar un bote y en realidad el contenido sería ediciones ediciones para hacer, y también voy a importar esto de react boosted strap y necesito uno y click Voy a crear una función manejar ediciones para hacer, y voy a pasar el objeto para hacer aquí Como recuerdas, tenemos un dato que es una lista y voy a iterar sobre él con esta función de mapa para cada uno de estos elementos, tendremos que hacer objeto Cuando vamos a hacer clic en el botón, queremos pasar el objeto de hacer que está relacionado con ese botón y voy a definir este botón de manejador para hacer. Aquí, yo diría que puede manejar el botón de edición, que obtiene un to do que es de los dos do type. Aquí estamos queremos mostrar el modelo. Tengamos aquí también el modelo. Voy a mostrar el modelo aquí, necesitamos la propiedad para el show y necesitamos la propiedad para set show model y también necesitamos la propiedad para dos a cuatro ediciones, que será un objeto Voy a poner esto y también necesito tener una variable Bodian, así que también voy a usar aquí el estado de reacción Voy a establecer show y set show será un Body y de reaccionar a usar estado, que es un falso. Tengo esto y para el modelo de set show, diría set show. Y tal vez incluso mejor llamar a este método como un set show porque no necesitamos el modelo en Cambiemos el nombre de esto a sets y también bajaré y voy a cambiar esto a set. Ahora es mejor. Tengo el show y set así. Cuando realmente vamos a hacer clic en este botón, vamos a pasar los dos hacen y yo también voy a usar el react estate para eso. Voy a crear otro objeto, que será de dos a cuatro edición y también diré set 24 edit esta vez, voy a crear un objeto a partir de los dos do type. Para los inicios, solo podemos tener un objeto vacío, que será el título será una cadena vacía y es importante, será falso y las manos también serán falsas. Sólo un objeto vacío y vamos a pasar este objeto a nuestro modelo. Aquí en realidad cuando el usuario hace clic en algo, vamos a llamar a esta función y vamos a usar el set show dos para hacer aparecer el modelo y también vamos a almacenar el objeto que el usuario haga clic en este conjunto para hacer para editar y voy a pasárselo aquí. Hasta el momento, veamos cómo se ve esto. Como vimos, tenemos el botón aquí y por cada fila y si hago clic en él, maravilloso. Ahora voy a ver este modelo y tengo que comprar abarrotes es importante, se comprueba, ha hecho se comprueba. Por ahora, este botón no funciona porque no cambié el código de la creación. Si hago clic en el segundo, diré que voy a ver que lo que el punto es importante, ha hecho, y estos son exactamente los valores que tengo aquí. Increíble por ahora. 35. Usa la mutación para editar el elemento por hacer (parte 1): Ahora que tenemos el teléfono, avancemos al siguiente paso que en realidad es usar una mutación de consulta de té para editar el elemento. Vayamos y veamos la mutación que tuvimos. No cambié esta parte del código. Esto es exactamente como crear para hacer mutación. Empecemos por aquí y llamemos a esta edición para hacer mutación y vamos a pasar vamos a usar un método put porque la API, cuando estamos creando estamos publicando un objeto y para editar, vamos a usar el put la API también, necesitamos decir qué ID de la hacer que queremos editar. También agregaré el para hacer eso es identificación. Este será el punto final para actualizar el todo aquí voy a pasar esto para hacer déjame que tengamos este objeto que hacer para editar y solo voy a pasar el título ha hecho y es importante a partir de esto. Por ahora, voy a quitar esta evitación y dentro de nuestro manejador de espumas, vamos a usar esta Vamos a ver si la solicitud de red está funcionando como se esperaba. Déjame refrescar la página. Creo que tengo un error o problema. Déjame iniciar el proyecto. tienes dos errores Aquí tienes dos errores y exactamente porque lo cambio para crear para hacer, déjame también cambiar esto para editar a la mutación. Y ahora esto es bueno. Permítanme abrir la pestaña de red de mi navegador y veamos si realmente está ocurriendo la solicitud de red. Estoy esperando cuando cree esto y cuando presione esto, voy a tener esto esto es bueno y vamos a pasar los locales 82 undefined. Demuestra que la identificación no es correcta. Vamos y arreglemos el problema. Y creo que lo hice por error por debí haber usado dos a cuatro ediciones, así que deberíamos usarlo aquí y ya no necesitamos este objeto todo aquí. Vamos y veremos nuestros esfuerzos que hicimos en el último video, ya tenemos el manejo de errores aquí. Déjame refrescar la página. Déjame limpiar mi red y déjame intentarlo de nuevo. Y maravilloso. Ahora, tengo la solicitud Put y tengo la solicitud 200 y se han enviado los valores del formulario. 36. Usa la mutación para editar el elemento por hacer (parte 2): En. Y como siguiente paso, también debería hacer otra cosa ahora mismo es que no mapeé ninguno de estos valores a los objetos editados. Si el usuario empieza a escribir en un teclado, nada cambia aquí porque solo uso el código que tenía de anteriormente para la creación y verás que dentro del sin cambios, solo estamos configurando el título y este título no es en realidad estos objetos no son para hacer para editar. Voy a cambiar el objeto de edición de dos a cuatro. Para ello, también iré al componente list y aquí también vamos a pasar el set al componente edit model. También voy a pasar esto y voy a ampliar la propiedad y el tipo de esta propiedad volverá a despachar set axon, pero esta vez será de los dos do type También usaré este pase esto como parámetro y el objeto todo, no lo necesito, así que lo voy a quitar. Aquí set, en vez de set to do, voy a usar set 24 edit y el valor por defecto que estoy pasando es este 24 también reemplaza esto. Y ahora estoy esperando que mi teléfono responda a la acción del usuario. Vamos a refrescar la página. Déjame despejar mi red y soltarme y empecemos a escribir más bien. Presionemos Editar todo. Tenemos la solicitud aquí, y como pueden ver, esto ya se ha hecho. Y también debería cerrar el modelo y porque eliminé el éxito, eliminar las consultas invalidadas Ahora, verá que los cambios no se han aplicado aquí. Pero también cuando el usuario presiona sobre la edición para hacer, también debemos cerrar el modelo. Hagamos también eso. Sobre el éxito de la mutación, voy a poner el set show en false. Y déjame refrescar la página. Ahora que la página ha sido refrescada, en realidad, estás viendo que estos cambios se han cargado. Hagámoslo de nuevo y esta vez, lo devolveré al fondo, presionaré set edit. Ahora el modelo ha desaparecido, pero sigo viendo el antiguo valor. Si refresco la página, voy a ver esto. Ya conocemos este problema y ya tenemos esta solución para ello. Yo solo quería mostrarles lo que va pasar cuando no tengamos esto y primero, verán el error y luego otra vez, tendremos esta solución. Vamos esta vez a editarlo y maravilloso. Ahora verán que puedo cambiar fácilmente este objeto y podemos ver en tiempo real lo que está pasando aquí. Voy a verificar esto, devolverlo y presionaré Editar para hacer. Ahora tengo también la funcionalidad de edición. 37. Introducción a la sección de eliminación: Todo bien. Increíble. Veamos y tengamos una visión general sobre lo que logramos hasta ahora. Hemos creado nuestra aplicación para hacer, y en nuestra aplicación Todo, los usuarios pueden crear dos dos y cada uno para hacer tiene tres propiedades, que es un título que muestra lo que se debe hacer. Y hay dos banderas que muestran si este todo ya se ha hecho y el segundo es esto para hacer es importante. Y también, hemos creado un componente de lista, un componente de tabla en el que los usuarios pueden ver la lista de tareas que hacer y saben qué hacer deben hacer y qué son importantes y cuál ha hecho. En la última sección, implementamos la funcionalidad de edición para todos. Los usuarios también podrían editar los elementos de todo e inmediatamente ver los cambios en la tabla. Vamos a continuar nuestro trabajo y en esta sección, voy a implementar la eliminación. Al igual que en la sección anterior, quiero usar una Saqmutacion de bronceado para eliminar un elemento de todo. Estos son criterios de aceptación que tenemos. El primero es que queremos mostrar una confirmación antes de la eliminación, porque no queremos que si el usuario accidentalmente hace clic en la eliminación, el elemento sería eliminado. Primero, queremos mostrar una casilla de confirmación y si el usuario lo aprueba, entonces queremos eliminar eso para hacer. Al igual que en la sección anterior, los cambios deben ser aplicados a nuestra vista de lista a la tabla que teníamos para los todos. Cuando se haya completado el dígito, debe inmediatamente el usuario debe ver inmediatamente los cambios dentro de la tabla. Increíble. Empecemos. 38. Implementación del componente modal de eliminación: Ahora estoy en el proyecto y para implementar eso, voy a copiar el modelo de edición y voy a llamar a esto el modelo dilit Como antes, también renombraré las propiedades. Voy a llamar a las propiedades del modelo Dt y voy a llamar a este componente modelo Dilete y dentro de mi exportación, también voy a exportar por defecto este componente Las propiedades para el show y set show voy a renombrar esto a todo para dilete y también cambiaré el nombre de estos para establecer para hacer por dit Y necesito pasar esto como una propiedad aquí y vamos usar también este nombre para hacer para delete y set to do para delete. No estamos cambiando el objeto así que no necesito ninguno de estos métodos para establecer importancia, set se ha ido, voy a eliminarlos todos. Y para la mutación, voy a cambiar esto y voy a llamar a esta eliminación para hacer mutación. Porque también estamos cambiando los datos en el servidor, entonces esto es una mutación. Recuerda siempre cuando estemos leyendo datos, usaremos query y cuando estemos escribiendo datos en el servidor en forma de post o put o delete, vamos a usar mutación. Nuestra función de mutación sería el método axis delete del eje lo único que necesitamos pasar es el ID del para hacer que vamos a borrar. Y puedo eliminar completamente este objeto. Y en caso de éxito, vamos a consultas inválidas. Vamos a configurar show falls para que el pop up esté oculto y también enviar sería lo mismo. Sólo necesito pasar esta mutación aquí. Dentro de mi modelo, voy a renombrar el título para borrar para hacer y no necesito estas entradas, así que voy a quitar todo. Lo único que necesito son dos botones para sí y no. Voy a ir a cambiar el texto aquí a sí y la mutación también debería ser eliminada a la mutación. Voy a crear otro botón. Esta vez lo haré un Hagamos el sí como tangerF este no, usaremos el primario Y este texto sabríamos que tenemos sí es en realidad también puedes probar el fd unqued. A este botón, así no necesito los cuatro. También eliminaré los cuatro y moveré todos estos códigos al lado izquierdo. Ahora para este, tengo el click y cuando los usuarios hagan clic entonces, solo quiero configurar el modelo para que se oculte. Nuevamente llamaré al set show con Fox. Increíble. Ahora he cambiado mi componente de modelo. 39. Uso de DeleteModal en el componente ListToDo: Así que vamos a usar este componente modelo dentro de nuestra lista. Necesito otro botón aquí. Entonces voy a copiar este botón aquí y lo llamaré eliminar para hacer. Y para éste, quiero ser rojo, entonces voy a usar la propiedad de lo que se llama la variante de propiedad. Voy a usar la propiedad variant para peligro, para eliminar, y necesitamos una función para la eliminación, así que crearé una y luego eliminaré a la función. Y veamos qué hemos hecho en el handle edit. Mostraremos el pop up y luego mostraremos configuraremos para la edición. Exactamente como aquí, voy a copiar esta función y la voy nombrar como un dígito de mango para que haga. Ahora necesito dos bandera por defecto, cambiemos el nombre de este programa a Editar modelo, mostrar y dejarnos y también necesitamos una división de dos veces. También copiaré toda la sección y llamaré al conjunto Editar modelo show y al segundo, lo llamaré Eliminar modelo show y set Eliminar modelo show y también voy a necesitar un two do fold let. Voy a llamar al conjunto dos para let y que nuevamente estará vacío. Cuando realmente estamos dentro de nuestro mango delete, vamos a establecer el show delete model. Porque queremos mostrar el segundo modelo y vamos a usar también la función set for delete para pasar este objeto. Y aquí teníamos el modelo, así que también voy a copiar esta línea y voy a usar el modelo de dígitos y también necesito importarlo. Voy a importar esto y el show será dit model show, y el set show se establecerá Dit model show y los dos do por dt serán dos do para dt y también necesitamos la función setter establecida para el di y la propiedad también se establece de dos a cuatro Asombroso. juntos y veamos qué está pasando. Tengo aquí para hacer y dejarnos abrir nuestra página de inspección y dejarnos ver la solicitud de la red. Voy a presionar este, maravilloso. Ahora voy a ver un pop up y me va a pedir que elimine para hacer tengo sí y no. Si presiono no, se habrá ido. Pero si presiono sí, entonces increíble. Tenemos la solicitud y aquí tenemos esta es la solicitud de opción y la segunda solicitud es realmente eliminar y la solicitud se ha ido. Vamos a convertir la consulta después de invalidar buscar la nueva lista de para hacer la respuesta es sólo un elemento También lo vemos aquí. Que solo tenemos un artículo. Asombroso. Ya ves lo fácil que podría implementar la función delete de una manera que funcione con toda mi aplicación. Maravilloso. 40. Ajuste de CSS para botones: Entonces vayamos y usemos otra variante. Para la variante, voy a pasar la opción secundaria y ahora se ve mucho mejor. Tenemos este mensaje de confirmación. Tenemos esta eliminación. También tenemos un problema con estos dos botones que están muy juntos. Vamos al componente de lista y déjame tener otro TD para eso. Voy a agregar un TP y voy a poner mi did aquí y para el encabezado, también voy a agregar un encabezado y lo llamaré dit. Ahora creo que se ve mejor de lo que era antes. 41. Conclusión del módulo de eliminación y descripción general de la aplicación: Como último paso, tengamos una demo de nuestra aplicación en el patrimonio actual. Verán que tengo aquí un componente para la creación y una tabla, y tenemos un número que muestra cuántos hacer que tenemos que no ha hecho. También tenemos esta página de lista y comencemos y jueguemos con ellos. Voy a crear una nueva tarea y voy a llamarla es importante. Verás que en el momento en que presionaré, como recuerdas, simulamos una APA lenta. Pero en el momento en que presiono primero, esta tabla es ponerse al día. Ahora este número se actualiza. Si voy a la lista, voy a ver dos de ellos, y luego voy a crear otra tarea que ya se ha hecho. Yo lo llamaría tarea terminada y para ésta, voy a presionar ha hecho. Ahora mira esta sección que de inmediato, tenemos los tres, tenemos el uno. Se ha actualizado la tabla. Si voy a la lista, voy a ver la tabla actualizada y vamos a ver también la funcionalidad de edición. Vamos a crear otra tarea, llamamos tarea de eliminación y voy a comprobar estas dos. Nuevamente, nuestros números se hacen y ahora tengo esto y vamos a cambiar esto. Eliminemos lo importante y quitemos la cosa. Ahora solo tenemos uno de cuatro y vayamos y eliminemos este. Verán que de inmediato si borro este herfmón aparece, tengo tres escritorios aquí, voy a ver en la tabla Todos estos cambios también existen aquí. Es una aplicación realmente maravillosa y estoy feliz y me alegro de que hayas estado conmigo hasta ahora en este viaje. Tenemos una aplicación realmente responsable que todo lo que está sucediendo, todos estos componentes se comunican entre sí. Todo esto viene con el poder de la consulta de Tanna. De lo contrario, deberíamos tener estados y se deberían desencadenar muchas acciones para estos componentes comprendan lo que está sucediendo. Pero con la consulta de Tanna, podríamos gestionarla de una manera que todos los cambios estén ocurriendo y podamos tener tantos como componentes que queramos y podemos invalidar fácilmente la consulta y se llamará a una nueva llamada API y todos los componentes se volverán renderizar con datos frescos Tan maravilloso, enhorabuena, yo diría que es un buen momento para que te lleves tu café y gracias gracias por estar conmigo. 42. Funciones de consulta avanzadas: Bienvenido a la nueva sección, Funciones avanzadas de consulta en TenSta query Estoy muy contenta de que estés aquí en este módulo, y te felicito por terminar los módulos anteriores A partir de este módulo, vamos a profundizar en las características avanzadas que Rat query o Tensta query nos proporciona. Y las secciones anteriores solían estar relacionadas con las características normales y las características que se requieren para cada proyecto. En este video, voy a profundizar en las características avanzadas de la consulta TSA El objetivo y el propósito este módulo sea el almacenamiento en caché maestro, paginación y las cargas infinitas Primero vamos a discutir el almacenamiento en caché de consultas y el tiempo de espera El tiempo de parada es un concepto muy importante en TNSaquery y basado en mis experiencias, muchos estudiantes y muchos ingenieros de software y desarrolladores confunden sobre Además, esta es una muy buena pregunta para entrevistas, y si haces entrevista para un puesto, probablemente recibirás este concepto como pregunta, es importante entenderlo y aprenderlo con mucha precisión. Voy a hablar sobre el tiempo de estilo, el tiempo de efectivo, y lo que está sucediendo cuando TanSA query hace refetch Después de eso, vamos a hablar paginación y si tenemos una API que no devuelve todos los datos porque los datos son demasiado grandes o el número de registros es demasiado alto y tenemos paginación para estos datos, cómo podemos implementar la paginación con Y después de eso, iré a explicar sobre el pergamino infinito que probablemente hayas visto en algunos sitios web. Tienes diez listas de los artículos. Pero si vas al final de la lista, entonces verás una carga, y luego se cargarán los siguientes resultados y luego podrás tener un Scow infinito Entonces, si necesitas más resultados, entonces bajarás. Y vamos a discutir eso. Y después de eso, hablaremos de consultas de dependencia que se basan en otros resultados de consulta y después de eso, vamos a hablar de consultas paralelas y dinámicas y hablaré de cómo podemos mapear consultas dinámicas. Y al final de la, el último video será sobre el refetching de fondo y también discutiré qué significa este concepto y cómo podemos hacer un refetching de una manera que el usuario no lo vea y esté sucediendo Empecemos con estos temas. 43. Almacenamiento en caché de consultas en TanStack Query: Entonces comencemos con el almacenamiento en caché de consultas y el tiempo de instalación. Interesa consulta, cada consulta, cuando se ejecutará, el resultado se almacenará en una caché en memoria. Entonces en nuestra aplicación, que es un todos, cuando tenemos una consulta para buscar la lista de los todos, el resultado que nos devuelve la API se almacenará en una caché en memoria Y ¿cuál es el beneficio de este cache? Esta caché evita capturas innecesarias. Entonces, si ya tenemos los datos, no necesitamos volver a pedir a la API los mismos datos. Y hace que la interfaz de usuario responda instantáneamente porque no tenemos que esperar a que la API reciba la respuesta. De hecho, podemos mostrar los datos inmediatamente al usuario. Y también reduce la carga en el servidor porque en lugar de llamar a API cada vez, primero leeremos los datos de la caché, y si esto no existe, entonces le preguntaremos a la API. Y también nos proporciona una aplicación amigable fuera de línea porque somos nuestra aplicación no depende de cada solicitud a la API. Así que podemos tener algún tipo de almacenamiento en caché y este almacenamiento en caché nos permite dar la experiencia de la aplicación offline Por lo que el usuario no necesita estar siempre conectado a Internet. Y cómo funciona este caché en realidad, como expliqué en los videos anteriores, por lo que una clave de consulta es la clave que se identifica de manera única estos datos de caché. Y en realidad estamos en nuestros componentes, cuando estamos usando use query, esa clave que estamos pasando a la consulta de uso se mantendrá como clave para esa búsqueda de datos Por lo que TensaQuery no obtiene los datos de inmediato. Primero, devuelve los datos de caché, y luego decide refetch o hacer otra cosa Y este es el concepto de thetllnes. Pero para este video, quiero por ahora centrarme en este almacenamiento en caché y cómo funciona este mecanismo de almacenamiento en caché Entonces en el siguiente video, te voy a mostrar en nuestra aplicación, y te voy a dar una demo sobre este almacenamiento en caché, y podemos ver cómo en nuestra app está funcionando 44. Demostración de caché de consultas en nuestra aplicación ToDo: Veamos este Caché de Consultas en nuestra aplicación. Entonces, como recuerdas, tenemos un componente aquí, que es una tabla que muestra la lista de las que hacer. Y tenemos un número que muestra cuántas tareas ya las hemos hecho. Y vayamos y abramos la sección de inspeccionar y vayamos a la pestaña Red. Y aquí me interesa solo la solicitud de fetch o XHR. Vamos a refrescar la página. Y aquí verán que ahora tengo una solicitud a la API, y la solicitud es host local 8,002 pero este componente necesita estos datos y este componente también necesita estos datos Pero TanStack Query utiliza el concepto del caché y cuando es la primera vez ocurre esta llamada a la API, porque sabe que la clave Query porque sabe que la clave Query para que esto haga es hacer y ya la tiene, no llama a la segunda Tenemos dos componentes que están usando los datos, pero solo se requiere una llamada API. Sentémonos juntos dentro de nuestro código fuente. Entonces tenemos este componente que se llamó Importante para dosificar y esto muestra este texto tendrás uno importante que hacer eso es longitud para hacer, que es este texto. Aquí, hemos utilizado el uso Query y la clave de consulta es hacer. Déjame buscar los usos de esta clave de consulta. Lo tenemos en nuestras mutaciones y en realidad están invalidando la consulta, pero el otro componente es la lista, que también está en la primera línea, llama a esta API, pero la clave de consulta se utilizará como clave para el almacenamiento en caché de estos Si vengo a este componente y cambiemos esto a otra clave de consulta. Crearé una nueva clave de consulta y llamaré a esta Clave de consulta también, y luego llamaré, la cambiaré para hacerlo. Veamos qué va a pasar. Si vengo y si limpio mi red, la próxima vez que vuelva a cargar la página, aquí están viendo dos solicitudes Y la razón es que este componente necesita los datos, y este componente también necesita los datos. Pero ahora he usado diferentes Claves de Consulta. Entonces la caché existe, pero debido a que he usado diferentes Claves de Consulta, han sido tratadas como diferentes entradas dentro de la caché. Pero esto también muestra la importancia de usar las Claves de Consulta. Pero si vengo aquí y la vuelvo a cambiar a la cadena a una, que es hacer entonces sólo tenemos una petición. La primera vez depende. A veces tal vez estos componentes se renderizan más rápido, a veces los componentes se renderizan más rápido. Pero lo importante es la TanStack Query, cuando la primera vez que llama a la API y obtiene los datos, guarda los datos caché en base a la consulta la próxima vez si este componente está renderizando y luego consulta TSA sabe que esto requiere un dato de API, que tiene la misma clave de consulta entonces TanaSaquery sabe, ya tengo datos de caché y no hay necesidad cuando la primera vez que llama a la API y obtiene los datos, guarda los datos en caché en base a la consulta la próxima vez si este componente está renderizando y luego consulta TSA sabe que esto requiere un dato de API, que tiene la misma clave de consulta entonces TanaSaquery sabe, ya tengo datos de caché y no hay necesidad de llamar la API otra vez. Devuelve el valor que ya existe dentro de la caché. 45. Concepto de stallness: Hablemos del concepto de sllness y ¿qué significa eso? Este es uno de los conceptos que muchos estudiantes e ingenieros de software y desarrolladores confunden. Cada solicitud y cada consulta en TanStack Query tiene un ciclo de vida fresco y de estilo, comienza cuando TanStack Query obtiene estos datos, el estado de estos datos es Y después de algún tiempo, va a una tienda. Entonces, si quieres ver en la vida real, imagina que vas a una tienda de comestibles y compras plátano. Y este plátano es cuando lo compras, está fresco. Entonces, si la guardas en tu casa de uno a tres días, después a veces esta frescura se apaga. Y se puede pensar en un tiempo de parada como algo que está pasando con esta penma Esto también tiene sentido en la ingeniería de software porque cuando estamos llamando a una API y cuando estamos obteniendo un dato, por ejemplo, lista de hacer, el momento en que se ejecuta esta consulta y esta llamada a la API, los datos están frescos. Pero si esperamos, por ejemplo, 3 minutos o 5 minutos, tal vez en este tiempo, otro usuario ha creado un para hacer o tal vez editó para hacer o tal vez hayan eliminado algunos elementos. Entonces los datos que tenemos ahora dentro de nuestro cliente ya no son frescos. Y el tiempo de parada, que se basa en milisegundos, establece cuánto tiempo se consideran frescos los datos Y cuando los datos están frescos, entonces no se requiere refetching automático porque TanSA Query dice que, bien, los datos siguen frescos y los tengo en mi memoria, así que no necesito refetch los Pero cuando los datos van al estado de datos de establo, entonces tansyqe gana refege, no siempre, sino cuando se Por ejemplo, cuando se está enfocando en la ventana cuando está montando un componente, etcétera Y el comportamiento predeterminado para este tiempo de parada es cero. Hasta ahora, no lo hacíamos cuando estábamos usando Query, no establecíamos el tiempo de parada, este es un parámetro opcional, y por defecto, es cero. Cero significa que los datos se convierten en un bloqueo de inmediato. Entonces no hay tiempo por defecto que TanStack Query considere estos datos como frescos inmediatamente cuando obtiene los datos, es fresco y luego un milisegundo después va inmediatamente al puesto. Fecha. 46. Concepto de stallness en acción: Veamos este concepto en acción y vayamos a nuestra app y veamos qué está pasando. Ahora mismo, estoy en la página principal de la aplicación. Cuando haga clic en la lista, verá que tenemos otra llamada API aquí. ¿Por qué está pasando esto? Porque cuando estoy navegando por diferentes páginas y cuando se renderizarán diferentes componentes en la página, tansy query mira sobre la clave de consulta, pero debido a que el tiempo de parada es cero, lo que significa que los datos pasan inmediatamente al estado de parada, cuando se carga este componente, pide los datos frescos Porque ya, si voy a esto a los datos ha existido dentro de la caché, pero debido a que el tiempo de parada es cero, significa que los datos van inmediatamente al estado de parada. La consulta tansy refetch los datos. Y cambiemos esto y usemos el parámetro. Voy al componente de lista y a esta página, y aquí voy a añadir otro parámetro, que es la hora de inicio. Como dije, se basa en multi segundo, así que voy a escribir 10 mil, lo que significa que son diez segundos. Veamos cuál será la diferencia. Ahora, estoy en la página de todo, y si refresco la página, esta página lo requiere. Pero si inmediatamente cambio al componente de lista, entonces ves que no hay API extra. ¿Y por qué sucede esto? Porque ahora, le he dicho a TanStack Query que hasta 10 segundos, los datos aún se consideran frescos Cuando voy de mi página de inicio a la página de lista, que es este componente, esta lista de componentes, muy rápidamente antes de los 10 segundos, TanStack Query ya tiene estos datos en la caché y los datos aún se consideran frescos No llama a otra llamada API y solo devuelve los datos que ya están por si acaso. Pero si voy, por ejemplo, si voy a esta página y si espero más de 10 segundos, entonces los datos que existían en la caché serán categorizados como datos anticuados, lo que significa que los datos no están frescos TanStack Query no usa el valor en caché. Y ahora que cuando hayan pasado 10 segundos, cuando vaya a la página de lista, entonces llama a otra API, y la veremos aquí. Entonces esto es lo que realmente está sucediendo detrás de escena. Y ahora tengo una pregunta para ti y quiero pensarla. Veamos. Ahora que te expliqué, estamos esperando que si estoy cambiando entre estas dos pestañas muy rápidamente antes de los 10 segundos, solo se debe llamar a una llamada a la API. Veamos qué está pasando. Tengo la llamada API, iré a la lista. No hay llamada a la API, volveré a hacer. ¿Por qué? Tenemos una llamada API, volvamos a verla. Iré a la lista. No tengo una llamada IPA, volveré a la para hacer tenemos otra llamada IPA, pero Vayamos a la creación para hacer. Volvamos a la lista. Siempre y cuando pueda cambiar entre dos, no hay llamada a la API si cambio realmente rápido entre ellos antes de estos 10 segundos. Quiero que piensen cuál es la diferencia entre la página de inicio y la lista que cuando cambio de hacer a lista, no tenemos una API. Pero cuando regrese de la lista a la página principal, entonces tenemos una llamada APA. Piénsalo, te daré la respuesta en el siguiente video. 47. Respuesta a la pregunta sobre "Staliness": Entonces la respuesta a mi pregunta anterior es que tenemos dentro de nuestra página de inicio, tenemos múltiples componentes, y solo establecemos el tiempo de parada para este componente. Y esa es la razón por la que el tiempo de parada cuando vuelvo regreso si voy de la página principal a la última página. Matemos en la red. Cuando lo hago tan rápido, antes de los diez segundos, todavía obtengo los datos frescos. Aún me llegan los datos de caché, lo siento. Pero cuando vuelvo, siempre llama a la API. ¿Por qué? Porque aquí también tenemos un componente de progreso, y aquí también tenemos este componente. Y para estos dos, no fijamos la hora de inicio. Entonces para estos hoy el tiempo de parada es el comportamiento predeterminado, que es cero, lo que significa que los datos se detienen inmediatamente cuando volvemos de nuevo a esta página. Entonces para estos dos, la consulta necesita llamar a los datos. Así que vamos a arreglarlo. Pasemos a la importancia de hacer componente, y agreguemos también un tiempo de parada aquí para 10,000 y vayamos también al componente de progreso y agreguemos tiempo de inicio 10,000. Déjanos ahora. Ahora estoy aquí, iré a la lista. No hay ninguna llamada a la API. Los datos aún están frescos. Voy a regresar. No hay llamada APA. Volveré, volveré, retrocederé, no llamaré a la API y ahora ya pasaron los 10 segundos. Oh. Vamos a refrescar la página. Una solicitud, sin solicitud, sin solicitud, sin solicitud. Estoy cambiando, me estoy cambiando, sin solicitud. Y esa es la razón principal. Pero si espero después de los 10 segundos, ahora los datos, supongo que se han pasado 10 segundos así que los datos ya no están frescos. Entonces cuando regrese, tenemos la llamada API, pero siempre y cuando estemos en el alcance de 10 segundos, puedo cambiar entre estas dos pestañas sin ninguna llamada API adicional. Y el punto principal de esta pregunta para que entiendas realmente que para este componente, la hora de inicio está configurando, pero debido a que para estos dos componentes, no establecimos la hora de inicio y el valor predeterminado era cero, por lo que los datos se convierten inmediatamente en inicio y para estos dos componentes, tensa query necesitaba hacer la llamada API para obtener la nueva datos. 48. Comparación entre tiempo de caché y tiempo de espera estancado: Entonces hablemos la diferencia entre el tiempo de caché y el tiempo de parada. Estos son dos conceptos importantes en el acuario de decenas. Y el tiempo de parada es cuánto tiempo se considera que los datos son frescos. Y el tiempo de caché es cuánto tiempo permanecen los datos en la memoria después de que ya no se usan. Entonces, si tienes una clave de consulta, permanece en la caché incluso después de que ningún componente la use. Entonces en nuestra página de inicio, tenemos tres componentes, y estos tres componentes progresan y para hacer y la tabla, están usando la misma clave de consulta y los mismos datos. Y si tuviéramos un widget estoy que podría, por ejemplo, clic en el botón Cerrar y cualquiera de estos widgets se eliminaría de la página. Cuando cierro todos estos tres y todos estos tres componentes se desmontan, o cuando voy a la página de crear para hacer, que ninguno de estos componentes existe en esa página, no hay después de que el último observador desmonte, luego hay un temporizador que inicia, que es el temporizador de recolección de basura Y este temporizador define por cuánto tiempo el resultado relacionado con esa clave de consulta permanecerá en la caché en la memoria. Por defecto, el valor es de 5 minutos, es 1,000 milisegundos por 60 para convertirlo al minuto y por cinco Por defecto, TanStack Query cuando se monta el último observador y cuando no hay ningún observador que utilice el resultado de esos datos, Uh, que es mapeado por la clave de consulta, entonces se inicia un temporizador y después del tiempo de caché, esos datos serán eliminados de la memoria 49. CacheTime vs. StaleTime en la práctica: Para entender la diferencia entre el tiempo de parada y el tiempo de caché, hagamos experiencia y experimento juntos. Así que vayamos y cambiemos el código fuente de nuestro servidor y hagamos lenta la API para la lista de los dos dos. Por ejemplo, hagámoslo API una manera que responda en 5 segundos. Hemos definido esta función de retardo. Voy a mover esto un poco hacia abajo. Y aquí voy a demorar cinco segundos. Y luego después de eso cuando esto se haya hecho, voy a devolver los resultados que estaba regresando anteriormente. Con este enfoque, estoy creando una simulación para API lenta. Tenemos un retraso de 5 segundos y luego estamos regresando la fecha. Vamos y reiniciemos nuestra app sever y vayamos aquí y refresquemos la página Ahora verás que tenemos cargas porque la API aún no ha sido respondida y después de 5 segundos, tenemos los datos Y ahora que tenemos el tiempo de instalación de 10 segundos, si voy a la lista de componentes, los datos aún están frescos. Por lo que no hay necesidad de otra llamada a la API. consulta de Antennaa no carga la nueva no llama a la API para obtener los datos porque los datos en la caché y el tiempo de instalación es de 10 segundos, por lo que los datos aún están frescos Y ahora he hablado un rato, así que ya pasaron 10 segundos, y quiero volver a la página principal. Y quiero que detengas el video y pienses que lo que va a pasar. Entonces lo que va a pasar es el momento en que regrese, los datos aún están en la caché, pero los datos no están frescos. Entonces tensa query llamará a la API, y esa es la parte más importante ahora que podemos entender la diferencia entre esta z y el cachet Dado que los datos estaban en la caché y no se han pasado los 5 minutos del tiempo de caché, aún así reaccionan puede mostrar esto y puede renderizar esta página. Pero TanStack Query sabe que los datos que se muestran al usuario no son frescos Entonces, en segundo plano, llama a la API. Y debido a que la API es lenta y tarda 5 segundos, la solicitud seguía en el estado pendiente, pero pudimos ver la página. Entonces con el alto tiempo de almacenamiento en caché, podemos tener una buena experiencia de usuario de una manera que el usuario no necesite esperar aquí 5 segundos por los datos Todavía estamos mostrando los datos, pero TanStack Query, y sabemos que los datos no son frescos, por lo que los datos se almacenan Y en segundo plano, llama a la API. Y esto está pasando de nuevo si voy a la menor página. Si no teníamos TanStack Query y si el componente A componente ha sido escrito una manera que llame a la API, cuando navegue a la última página, entonces veré una carga durante 5 segundos Pero debido a que lo tengo dentro de la caché, verás los datos, pero hay una solicitud pendiente. Y en el momento en que esta solicitud se esté actualizando, entonces obtendremos los nuevos datos y los nuevos serán reemplazados. Podemos hacerlo fácilmente yendo a nuestra aplicación de servidor y aquí, podemos agregar otra tarea. Podría llamarlo ver mis códigos UDM. Y voy a reiniciar el servidor. Ahora nuestra aplicación To do tiene tres elementos. Cuando vuelvo al todo, seguimos viendo los dos porque tenemos los datos de la caché, la solicitud está en la carga, y ahora los datos han sido frescos. De esta manera, podemos tener una buena experiencia de usuario incluso cuando la API es lenta. Espero que estés disfrutando de sillas de vida y déjanos ir a la siguiente sección.