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

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.

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

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

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í