React Query Una Librería Útil Para React

4 minuto(s)

En esta página:

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” y “¿ 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.


// index.js 

import {QueryClient, QueryClientProvider} from "react-query";
import {ReactQueryDevtools} from "react-query/devtools"; // this helps monitor performance

const queryClient = new QueryClient(); // esto permite que 'queryClient' esté disponible para toda la aplicación 

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen />
    </QueryClientProvider>
  </React.StrictMode>
);

// index.js

import {QueryClient, QueryClientProvider} from "react-query";

import {ReactQueryDevtools} from "react-query/devtools"; // this helps monitor performance

const queryClient = new QueryClient(); // esto permite que 'queryClient' esté disponible para toda la aplicación

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</QueryClientProvider>

</React.StrictMode>

);

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


import { useQuery } from "react-query"


function Ejemplo() {

    // Definimos nuestra función de búsqueda como lo habríamos hecho con 'useEffect' 
    const fetchData = async () => {
        return await axios.get("https://jsonplaceholder.typicode.com/posts")
    } 

    const {
        isLoading,
        data,
        error,
    } = useQuery("nameOfCache/Query/Key", fetchData)

    if (isLoading) return "Cargando ..." // Devuelve el mensaje 'Cargando ...' si aún no se han recibido los datos del servidor.

    if (error) return ( < p > Error < /p> ) // Devuelve un error después de 3 reintentos 
        // Si hubo un error al obtener los datos.

        return(
            <div> {
                data.map((item) => {

                        return (

                            <div key = {item.id} >

                                <h1> { item.name } < /h1>
                                <p> 
                                    { item.title } 
                                </p> 

                            </div>

                        )
                    }

                )
            }

            </div>

    )

}

import { useQuery } from "react-query"

function Ejemplo() {

// Definimos nuestra función de búsqueda como lo habríamos hecho con 'useEffect'

const fetchData = async () => {

return await axios.get("https://jsonplaceholder.typicode.com/posts")

}

const {

isLoading,

data,

error,

} = useQuery("nameOfCache/Query/Key", fetchData)

if (isLoading) return "Cargando ..." // Devuelve el mensaje 'Cargando ...' si aún no se han recibido los datos del servidor.

if (error) return ( < p > Error < /p> ) // Devuelve un error después de 3 reintentos

// Si hubo un error al obtener los datos.

return(

<div> {

data.map((item) => {

return (

<p>

{ item.title }

</p>

</div>

)

}

)

}

</div>

)

}

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.