Simplificando la gestión de datos en React con React Query

Rate this content
Bookmark

Esta charla trata sobre cómo React Query puede simplificar la gestión de datos en las aplicaciones de React. La charla cubre los conceptos básicos de React Query, incluyendo sus características para la obtención y actualización de datos, el manejo de actualizaciones optimistas, la composición de consultas y mutaciones, y la gestión de errores y reintentos. Al final de la charla, los asistentes tendrán una clara comprensión de cómo React Query puede mejorar la experiencia del usuario y reducir el código repetitivo en sus aplicaciones de React.

Harsh Shah
Harsh Shah
16 min
23 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy introduce React Query, una biblioteca que simplifica la gestión de datos en las aplicaciones de React. Cubre los conceptos y características principales de React Query, incluyendo la obtención de datos, el almacenamiento en caché y la mutación. La charla también discute la invalidación de consultas y el tiempo de caché, destacando cómo React Query optimiza el rendimiento y reduce la complejidad del código.

1. Introducción a React Query y la gestión del estado

Short description:

El tema de hoy es simplificar la gestión de datos utilizando una consulta de proyecto. React Query es una biblioteca útil que simplifica la obtención de datos y la gestión del estado. Proporciona varios hooks y maneja la carga, el error, la precarga y la desduplicación de solicitudes. Vamos a sumergirnos en React Query y explorar sus características.

Hola, así que hola a todos. Así que hoy voy a hablar sobre simplificar la gestión de data en utilizando una consulta de proyecto. Así que esto es una pequeña cosa sobre mí. Mi nombre es Harsh. Soy CTO en una empresa llamada Parallels Up. También soy un defensor de Polygon. También he hecho 2x G-SoC. También formo parte de la iniciativa del MIT Media Lab. Estas son las siguientes cosas que estoy haciendo en la community y trabajo con muchas startups y empresas globales.

Entonces, sí, vamos rápidamente a lo que es la React State Management. Hay dos tipos de gestiones de estado. Una es la gestión del estado global, otra es la obtención de data. La gestión del estado global es básicamente cómo estás gestionando un estado a nivel global. Como puedes pasar una variable global y puedes definir el estado y puedes usarlo en el Estado de React. Y uno es la obtención de data. La obtención de data es que puedes obtener la data utilizando APIs u otros formatos JSON en la cabeza, y basado en la obtención de data haces una consulta y pasas la data y mapeas la data.

Así que es una afirmación muy simple tener la gestión del estado en React. Entonces podemos pasar a React Query, que queremos aprender aquí. React Query es una biblioteca útil que ayuda a gestionar nuestra obtención de data utilizando la captura y optimizando nuestras solicitudes de consulta y todo. React Query se desarrolla muy fácilmente para obtener, actualizar data utilizando varias fuentes y la biblioteca maneja automáticamente tu estado de obtención de data y captura. Hay varios hooks disponibles en React Query. Así que vamos a ver uno por uno qué tipo de hooks y qué cosas están disponibles en React Query. Así que antes de saltar a React Query, entendamos cómo funciona una consulta normal o cualquier tipo de consulta. El primer estado de React Query es básicamente un estado de carga o error. Cuando obtienes cualquier tipo de data, primero es como si data es enorme, pones una carga o data no se obtiene, pones un estado de error o algo así como algo así como try-catch o promesas algo. Y luego el segundo paso es como la precarga. La precarga es pre-cargar tus data antes de renderizar las data reales en el lado de un móvil o cualquier cosa. Así que es como precarga, solicitud de pre-vuelo. La desduplicación de una solicitud es básicamente cuando haces una simple llamada a la API y está llamando a la API varias veces. Es como una llamada a la API de pre-vuelo primero para comprobar si los data están llegando o no.

2. Conceptos y Características de React Query

Short description:

Se cubren el desplazamiento inicial y el desplazamiento infinito de la página, la mutación, el reintento y el error, y los cuatro conceptos principales de ReactQuery. Las principales características incluyen la obtención y almacenamiento en caché de datos, la actualización de datos en segundo plano, el uso optimizado de la memoria y el soporte para paginación, carga perezosa y desplazamiento infinito. React Query proporciona hooks como UseQuery y QueryClientProvider para obtener datos. Se utiliza el parámetro UniqKey y la notación de array en la última versión de la consulta.

Y la segunda llamada es como la confirmación de data. El desplazamiento inicial y el desplazamiento infinito de la página es uno de los mayores ejemplos de personas que están utilizando Great Query y state management. El desplazamiento inicial y el desplazamiento infinito de la página es una de las cosas difíciles de hacer a veces porque cuando los data son enormes, necesitas complicar y cortar y hacer todo y gestionar tu estado y consultar todo data. La mutación es en última instancia duplicaciones. Y el reintento y el error es como, intenta si data se está obteniendo no está obteniendo error, intenta de nuevo. Por eso intentaré y buscaré.

Así que pasemos a los conceptos principales. ¿Cuáles son los conceptos principales en las consultas de react? Así que hay cuatro conceptos principales en la consulta de react. Uno es la consulta, en la que solicitas los data de una fuente remota como puntos de API o database y utilizando un hook de react query, puedes obtener todas las consultas. El segundo es las mutaciones, donde añades la solicitud en la llamada de API y puedes modificar los data existentes utilizando los simples hooks llamados useMutation hooks. El tercero es la captura de consultas. Cuando estás haciendo una consulta, quieres hacer algún tipo de captura como obtener los data de la API en sí. Así que ReactQuery proporciona automáticamente la función de captura de ReactQuery y almacenan tu resultado como una captura y puedes usar la captura de varias maneras. Y la validación de consultas es el proceso de hacer una consulta para un estado inválido en todo. Y estos son los cuatro conceptos principales de ReactQuery.

Bueno, así que pasemos a la característica principal de ReactQuery. La característica principal es para ReactQuery por qué usamos, queremos usar ReactQuery o por qué ustedes quieren usar ReactQuery en lugar de la otra declaración de Google. Uno es la obtención, obtener y capturar data Otra cosa es que puedes usar esos data obtenidos en cualquier lugar de la aplicación en sí. No hay necesidad de definir un estado global y poner data aquí y allá. Puedes actualizar tus data en segundo plano como puedes usar mutaciones y basado en mutaciones puedes actualizar tus data y modificar tus data. La gestión de la memoria es increíble en ReactQuery. Puedes eliminar o puedes, cualquier data que no estés utilizando Optimiza tu uso de la memoria. Para la paginación, la carga perezosa y el desplazamiento infinito Esta es la mejor biblioteca que puedes usar para hacer simplemente paginación, carga perezosa y desplazamiento infinito. No sólo esta función sino que puedes configurar CreateQuery de la manera que quieras Como el enfoque de la ventana o la reobtención o el retraso de la consulta Depende de la consulta que quieras hacer pero esto te ayuda mucho en la gestión de consultas y state management. Aprendamos uno por uno o entendamos uno por uno ¿Cuáles son los hooks principales en una consulta de React? Cuando estamos obteniendo los data uno de los hooks comunes que usamos cuando estamos haciendo una consulta de React es UseQuery puedes ver aquí la consulta de React cuando usas, necesitas ejecutar un hook, se llama QueryClientProvider Es en última instancia un envoltorio que es una herramienta que te ayuda a consultar utilizando UseQuery y el componente hijo en sí. Así que hay dos parámetros únicos que necesitas pasar uno es UniqKey y necesitas devolver una función en el parámetro en sí. Tenemos un ejemplo, puedes ver aquí. En una sintaxis simple puedes comprobar, seleccionar const UseQuery. UseQuery es nuestro hook y estamos pasando dos parámetros uno es queryKey y query function es callback function queryKey es un breve, que es UniqKey y en una versión estable o en la última versión de la consulta necesitas usar notación de array. Con notación de array estamos pasando

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
Cuando pensamos en Vuex, Pinia, o tiendas en general, a menudo pensamos en la gestión de estado y los patrones Flux, pero no solo las tiendas no siempre siguen el patrón Flux, ¡hay mucho más en las tiendas que las hace valer la pena usar! Plugins, Devtools, renderizado en el lado del servidor, integraciones TypeScript... Vamos a sumergirnos en todo más allá de la gestión de estado con Pinia con ejemplos prácticos sobre plugins y Devtools para sacar el máximo provecho de tus tiendas.
Uso efectivo de useEffect
React Advanced Conference 2022React Advanced Conference 2022
30 min
Uso efectivo de useEffect
Top Content
¿Puede useEffect afectar negativamente a tu base de código? Desde la obtención de datos hasta la lucha con las APIs imperativas, los efectos secundarios son una de las mayores fuentes de frustración en el desarrollo de aplicaciones web. Y seamos honestos, poner todo en ganchos useEffect no ayuda mucho. En esta charla, desmitificaremos el gancho useEffect y obtendremos una mejor comprensión de cuándo (y cuándo no) usarlo, así como descubriremos cómo los efectos declarativos pueden hacer que la gestión de efectos sea más mantenible incluso en las aplicaciones React más complejas.
React Query: ¡Es hora de romper con tu "Estado Global"!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: ¡Es hora de romper con tu "Estado Global"!
Top Content
Una cantidad creciente de datos en nuestras aplicaciones React proviene de fuentes remotas y asíncronas y, aún peor, continúa disfrazándose como "estado global". En esta charla, obtendrás información sobre por qué la mayoría de tu "estado global" en realidad no es un estado en absoluto y cómo React Query puede ayudarte a buscar, almacenar en caché y gestionar tus datos asíncronos con una fracción del esfuerzo y el código al que estás acostumbrado.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
Jotai es una biblioteca de gestión de estado. La hemos estado desarrollando principalmente para React, pero conceptualmente no está vinculada a React. En esta charla, veremos cómo funcionan los átomos de Jotai y aprenderemos sobre el modelo mental que deberíamos tener. Los átomos son una abstracción agnóstica del marco para representar estados, y básicamente son solo funciones. Comprender la abstracción de átomo ayudará a diseñar e implementar estados en sus aplicaciones con Jotai
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced Conference 2023React Advanced Conference 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Los Componentes de Servidor son la nueva gran cosa, pero hasta ahora gran parte del discurso a su alrededor ha sido abstracto. Cambiemos eso. Esta charla se centrará en el lado práctico de las cosas, proporcionando un mapa de ruta para navegar el viaje de migración. Comenzando desde una aplicación que utiliza el antiguo enrutador de páginas de Next.js y React Query, desglosaremos este viaje en un conjunto de pasos accionables e incrementales, deteniéndonos solo cuando tengamos algo que se pueda enviar y que sea claramente superior a lo que comenzamos. También discutiremos los próximos pasos y estrategias para adoptar gradualmente más aspectos de este paradigma transformador.
Anunciando Starbeam: Reactividad Universal
JSNation 2022JSNation 2022
27 min
Anunciando Starbeam: Reactividad Universal
Starbeam es una biblioteca para construir sistemas de datos reactivos que se integran nativamente con frameworks de UI como React, Vue, Svelte o Ember. En esta charla, Yehuda anunciará Starbeam. Cubrirá la motivación para la biblioteca, y luego entrará en los detalles de cómo funciona la reactividad en Starbeam, y lo más importante, cómo puedes usarlo para construir bibliotecas reactivas hoy que funcionarán nativamente en cualquier framework de UI. Si eres realmente aventurero, también hablará sobre cómo podrías usar Starbeam en una aplicación existente utilizando el framework de tu elección y hablará sobre los beneficios de usar Starbeam como el sistema de gestión de estado en tu aplicación.

Workshops on related topic

Repensando el Estado del Servidor con React Query
React Summit 2020React Summit 2020
96 min
Repensando el Estado del Servidor con React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
La distinción entre el estado del servidor y el estado del cliente en nuestras aplicaciones puede ser un concepto nuevo para algunos, pero es muy importante entenderlo cuando se entrega una experiencia de usuario de primera calidad. El estado del servidor viene con problemas únicos que a menudo se cuelan en nuestras aplicaciones sorpresa como:
- Compartir datos entre aplicaciones- Caché y Persistencia- Deduplicación de Solicitudes- Actualizaciones en segundo plano- Gestión de Datos "Obsoletos"- Paginación y Recuperación Incremental- Memoria y Recolección de Basura- Actualizaciones Optimistas
Los gestores tradicionales de "Estado Global" pretenden que estos desafíos no existen y esto finalmente resulta en que los desarrolladores construyan sus propios intentos sobre la marcha para mitigarlos.
En esta masterclass, construiremos una aplicación que expone estos problemas, nos permite entenderlos mejor, y finalmente los convierte de desafíos a características usando una biblioteca diseñada para gestionar el estado del servidor llamada React Query.
Al final de la masterclass, tendrás una mejor comprensión del estado del servidor, el estado del cliente, la sincronización de datos asíncronos (un bocado, lo sé), y React Query.
Gestión del estado en React con Context y Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
Gestión del estado en React con Context y Hooks
WorkshopFree
Roy Derks
Roy Derks
Mucho ha cambiado en el mundo de la gestión del estado en React en los últimos años. Donde Redux solía ser la principal biblioteca para esto, la introducción de las API de Contexto y Hooks de React ha revolucionado las cosas. Ya no necesitas bibliotecas externas para manejar tanto el estado del componente como el estado global en tus aplicaciones. En este masterclass aprenderás los diferentes enfoques para la gestión del estado en la era post-Redux de React, ¡todos basados en Hooks! Y como bonificación, exploraremos dos próximas bibliotecas de gestión del estado en el ecosistema de React.