React Query Una Librería Útil Para React

4 minuto(s)

Cuando trabajamos en React, en algunas ocasiones obtenemos nuestros datos con el hook UseEffect y si provienen de un fondo de componente de clase, este hook reemplazará sus funciones componentDidMount y componentDidUpdate, este último hook, es uno que es importante debas conocer. A diferencia del hook UseEffect, tenemos que manejar nuestro estado de carga, el error y configurar nuestros datos obtenidos (response) en un estado que contenga el objeto que obtuvimos de la solicitud realizada al servidor. Aquí es donde aparece la librería React Query y en este Post te mostraré porque React Query es una Librería Útil Para React, vamos con ello.

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Que Hacer Cuando Estamos En Casa“¿ Cual Es El Momento Ideal Para Dejar Tu Empleo y Ser Freelance ?” (Anchor Podcast)

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: React Query Una Librería Útil Para React. 

React Query Una Librería Útil Para React

La librería React Query te ahorra el estrés de manejar el estado de carga, error y configuración de los datos obtenidos (response) en un estado que contenga el objeto que obtuvimos de la solicitud realizada al servidor, ya que el enlace useQuery devuelve el estado de carga, el estado de error y los datos en sí. También devuelve isFetching, refetch, isSuccess y muchos más estados y funciones útiles.

El enlace useQuery podría aceptar 3 argumentos:

  • El primer argumento es el nombre de la consulta o clave, que podría ser una matriz (array) o una cadena (string).
  • El segundo argumento es la función de búsqueda que solicita datos del servidor.
  • El tercero, que es opcional, es un objeto que toma la configuración de cómo queremos que nuestros datos se sirvan a los usuarios, digamos que queremos determinar el tiempo de caducidad de nuestros datos, recuperar los datos cada vez que se monta el componente, activar una función en la recuperación exitosa, onError y muchos más.

Al igual que Redux, MobX y Zustand que son librerías de estado de cliente que se pueden usar para almacenar datos asincrónicos, React Query maneja el estado del servidor, ya que proporciona herramientas valiosas para mejorar la confiabilidad de los datos del servidor en términos de invalidación de datos, marcando datos como obsoletos y realiza captura previa de ellos, recuperación, almacenamiento en caché y muchos otras características más.

A continuación un fragmento de código que describe cómo obtener datos usando React Query en tus aplicaciones React. Asegúrate de consultar su documentación para obtener más información.


A continuación un ejemplo en un archivo JSX (ejemplo.jsx):


Puedes realizar otras tareas más, solo revisa su documentación oficial.

Conclusión

En este Post hemos aprendido algunos detalles sobre la librería React Query, la cual facilita mucho la lectura de datos desde un servidor y aumenta la productividad de los desarrolladores.

Nota(s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.