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.

16 min
23 Oct, 2023

AI Generated Video Summary

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

3. React Query: Consulta, Mutación y Caché

Short description:

Existe una función de consulta que ayuda a los hooks useQuery a obtener datos. El hook useQuery se utiliza para obtener usuarios de forma asíncrona. useMutation permite actualizar y cambiar datos desde el servidor. Devuelve un objeto con propiedades obtenidas de la API. La caché de consultas se utiliza para acelerar la obtención de datos guardando datos anteriores. StaleTime determina cuándo se considera obsoleto el resultado de una consulta.

puedes pasar múltiples arrays. Existe una función de consulta que es una función de devolución de llamada. Que ayuda a los hooks useQuery a obtener o buscar los data en cierto punto. Así es como puedes simplemente, hay una sintaxis y simplemente necesitas pasar dos parámetros queryKey y query function. Este es un ejemplo que es un pequeño ejemplo de cómo puedes usar un useQuery. Usando dos identificadores clave. Identificar cada consulta. Así que aquí hay una simple solicitud, obtener usuarios o buscar algunos usuarios usando una simple llamada asíncrona y lo que estamos haciendo es, estamos obteniendo los data y estamos usando los hooks useQuery aquí y estamos pasando la clave usuarios, queremos usuarios de los data en sí y estamos obteniendo usuarios, que es esta llamada que es una llamada de devolución de llamada. Y en base a eso estamos mapeando todos los datos de usuario aquí. Así que este es un ejemplo muy simple de cómo podemos usar un useQuery

El segundo es useMutation. UseMutation es permite a una react query actualizar o cambiar los data desde el servidor en sí. Puedes actualizar y usar esos data modificados en tu aplicación. Así que los hooks useMutation ayudan a crear, actualizar y eliminar data de la entrada de la API en sí. No necesitas ir a preguntar a tu ingeniero de database o ir a database y eliminar y luego puedes comprobar. Simplemente puedes usar mutación y basado en la entrada de la API puedes eliminar, actualizar o crear cualquier cambio en tus data. Los hooks useMutation requieren al menos una opción. Puedes ver cuáles son las opciones que puedes pasar. Es una sintaxis simple que puedes mirar.

Así que const mutation, useMutation es un hook y función de mutación simplemente estamos pasando cualquier función aquí. Los hooks useMutation básicamente devuelven un objeto, un objeto puede contener varias propiedades que estamos obteniendo de la API en sí. Este es un ejemplo simple. Estamos añadiendo el usuario, usando el useMutation en la API. Este es el punto final de la API. Estamos usando el método post y simplemente estamos pasando el cuerpo, cuáles son los usuarios que necesitamos para actualizar. Estamos usando un mutate básicamente ejecuta nuestras funciones estamos añadiendo este usuario, queremos eliminar, puedes usar eliminar o si quieres simplemente actualizar puedes actualizar. La caché de consultas es otro hook que es una react query en sí. La caché de consultas es cuando estás haciendo useQuery o cualquier otro parámetro de consulta cuando estás obteniendo los data de los servidores remotos o API o database. Para acelerar esa cosa necesitas guardar esos data, data anteriores para simplemente no buscar y no hacer ningún tipo de solicitud porque si haces solicitudes una y otra vez cuesta un servidor no es una buena práctica así que para eso la mayoría de la gente usa una caché y la caché de consultas es una función incorporada de React. Hay 2 propiedades predeterminadas que puedes usar cualquier opción que puedas usar es staleTime y CacheTime. Así que cómo funciona es StaleTime básicamente determina el tiempo que tarda el resultado de una consulta en considerarse obsoleto. Si puedes ver estamos simplemente consultando QSquery la clave es usuarios la función son GETuser y estamos poniendo

4. Tiempo de Caché e Invalidación de Consulta

Short description:

Esta sección discute el tiempo de caché y la invalidación de consulta en React Query. CacheTime determina cuánto tiempo permanecen los datos en caché, mientras que la invalidación de consulta te permite marcar consultas específicas como obsoletas. React Query proporciona hooks como useQueryClient y queryClient.invalidQueries para manejar la invalidación. La biblioteca ofrece una gestión de estado eficiente y características de caché y optimización de memoria incorporadas. Con React Query, los desarrolladores pueden reducir significativamente la complejidad del código y optimizar el rendimiento.

CacheTime es 500. Estos data pueden permanecer durante 5 segundos cuando estás haciendo una llamada a la API. Llamando o buscando los data Luego, si ponemos un CacheTime, es básicamente cuánto tiempo necesitas para atrapar ese resultado. Entonces, si piensas que nuestros data se actualizarán cada minuto o cada 30 minutos o cada 40 minutos. Como todos los días. Puedes poner un temporizador aquí. CacheTime atrapará tus data para cualquier período o cualquier cantidad de minutos que apliques en esto.

Luego pasemos a la invalidación de consulta. Básicamente, el método de invalidación de consulta es usar una consulta específica y un STALE. En STALE puedes marcar el tiempo STALE que vimos anteriormente en QueryCache Si quieres sobrescribir toda la configuración STALE para ser usada en una consulta real, este hook es el que puedes usar. Se usa básicamente en algunas de las condiciones para las que necesitas usar métodos de consulta inválidos. Entonces, cómo puedes usarlo es simplemente puedes importar QueryClient como useQueryClient y básicamente queryClient.invalidQueries e invalidQuery es básicamente cualquier clave que quieras pasar en un use query que básicamente te ayuda a invalidar solo la consulta como que no quieres más variables o subclaves y si pasas como opción verdadera, el método inválido es útil para simplemente pasar consulta inválida data. Hay como estos dos métodos. Entonces, esta función recibe cada consulta instantánea desde el caché de consulta y te permite devolver valores verdaderos o falsos y en base a eso puedes invalidar la consulta data. Entonces, React Query es la robusta biblioteca que te permite una gestión de estado eficiente. Te permite hacer uso de los hooks de React o useQuery o useMutation. Puedes modificar data basado en el punto de la API o el servidor. Además, hay muchas características en el mecanismo de caché incorporado o memoria optimization, caché de memoria. Puedes atrapar los data, robar los data y usando React Query puedes el desarrollador puede reducir significativamente la complejidad del código lo cual nos encanta. Un ejemplo que puedo dar es VR construyendo una aplicación ONE que es una aplicación web 3 pero hay enormes data que vienen del nodo en sí y queremos usar esos datos de consulta y cómo podemos optimizar esa consulta estábamos confundidos y luego usamos React Query y optimizamos más de 1000 líneas en el código en sí para optimizar mucha lógica implementamos caché y todo y usando eso estamos sirviendo a millones de usuarios ahora mismo para un cliente en sí. No es un producto construido sino un producto de cliente y cómo podemos optimizar ese producto usando React Query, ese es uno de los grandes ejemplos que pusimos en producción como equipo. Nos ayudó mucho estamos usando React Query en proyectos frecuentes así que debes intentarlo, si no has probado React Query hay algunos recursos que puedes explorar uno de los buenos recursos que descubrí así que muchas gracias por escucharme, puedes contactarme en twitter o mi correo electrónico, estoy muy activo en twitter sí

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

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as "global state". In this talk, you'll get the lowdown on why most of your "global state" isn't really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
JSNation 2022JSNation 2022
27 min
Announcing Starbeam: Universal Reactivity
Starbeam is a library for building reactive data systems that integrate natively with UI frameworks such as React, Vue, Svelte or Ember. In this talk, Yehuda will announce Starbeam. He will cover the motivation for the library, and then get into the details of how Starbeam reactivity works, and most importantly, how you can use it to build reactive libraries today that will work natively in any UI framework. If you're really adventurous, he will also talk about how you could use Starbeam in an existing app using your framework of choice and talk about the benefits of using Starbeam as the state management system in your application.
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.

Workshops on related topic

React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Featured Workshop
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.