Cómo usar ReactJS Query para obtener datos de APIs

En esta entrada de blog, te mostraré cómo usar ReactJS Query para obtener datos de APIs y mostrarlos en tu sitio web y cómo generar tu código ReactJS Query con Apidog

button

¿Qué es ReactJS Query y por qué deberías usarlo?

ReactJS Query es una biblioteca que te ayuda a gestionar la obtención, el almacenamiento en caché y la actualización de datos en tus aplicaciones React. Se basa en la idea de las consultas, que son funciones que obtienen datos de una API o de cualquier otra fuente. ReactJS Query se encarga de la carga, el almacenamiento en caché, la recuperación y el manejo de errores de estas consultas por ti, para que no tengas que preocuparte por ellas.

ReactJS Query también te proporciona mutadores, que son funciones que actualizan los datos en el servidor o en cualquier otra fuente. ReactJS Query se encarga de las actualizaciones optimistas, la reversión y el manejo de errores de estos mutadores por ti, para que tampoco tengas que preocuparte por ellos.

ReactJS Query también se integra perfectamente con React, utilizando hooks y componentes personalizados que te permiten acceder y manipular los datos en tus componentes. ReactJS Query también admite funciones como la paginación, el desplazamiento infinito, la obtención de datos en segundo plano, las consultas dependientes y mucho más.

Entonces, ¿por qué deberías usar ReactJS Query? Estos son algunos de los beneficios de usar ReactJS Query en tus aplicaciones React:

Simplifica tu código: ReactJS Query reduce la cantidad de código que tienes que escribir para obtener, almacenar en caché y actualizar los datos en tus aplicaciones. No tienes que usar Redux, Axios, SWR ni ninguna otra biblioteca para gestionar los datos. Simplemente usas ReactJS Query y sus hooks y componentes, y listo.
Mejora el rendimiento: ReactJS Query optimiza el rendimiento de tus aplicaciones almacenando en caché los datos y evitando solicitudes innecesarias. También te permite controlar cuándo y con qué frecuencia se recuperan los datos, y cómo se gestionan los datos obsoletos. ReactJS Query también admite funciones como la suspensión, el modo concurrente y la precarga, que pueden mejorar aún más el rendimiento de tu aplicación.
Mejora la experiencia del usuario: ReactJS Query mejora la experiencia del usuario de tus aplicaciones al proporcionar una carga y actualización de datos fluidas y consistentes. También te permite personalizar los estados de carga, error y éxito de tus datos, y proporcionar comentarios a tus usuarios. ReactJS Query también admite funciones como las actualizaciones optimistas, que pueden hacer que tu aplicación se sienta más receptiva e interactiva.

Cómo instalar y configurar ReactJS

ReactJS es una biblioteca de JavaScript para construir interfaces de usuario. Para instalar y configurar ReactJS en tu ordenador, puedes seguir estos pasos:

Paso 1: Instala Node.js, un entorno de ejecución de JavaScript, en tu ordenador. Puedes descargar el instalador de Node.js de forma gratuita desde el sitio web oficial. Se recomienda la versión de soporte a largo plazo (LTS) aunque la versión actual tenga las últimas funciones.
Paso 2: Instala ReactJS usando create-react-app, una herramienta que instala todas las dependencias para construir y ejecutar una aplicación ReactJS completa. Puedes usar npm o yarn, que son gestores de paquetes para Node.js, para hacerlo. Por ejemplo, puedes ejecutar este comando en tu terminal:

npx create-react-app my-app

Este comando creará un directorio llamado my-app dentro de la carpeta actual, y generará la estructura inicial del proyecto e instalará las dependencias transitivas.

Paso 3: Inicia el servidor de desarrollo y abre tu aplicación en el navegador. Puedes usar npm o yarn para hacerlo. Por ejemplo, puedes ejecutar estos comandos en tu terminal:

cd my-app
npm start

Estos comandos iniciarán el servidor de desarrollo y abrirán tu aplicación en el navegador en http://localhost:3000/. Puedes editar los archivos en la carpeta src y ver los cambios en el navegador.

¡Eso es todo! Has instalado y configurado ReactJS con éxito en tu ordenador, y has creado y ejecutado tu primera aplicación ReactJS. Puedes aprender más sobre ReactJS en su sitio web oficial, donde puedes encontrar la documentación, ejemplos, tutoriales y mucho más.

Cómo crear y usar consultas con ReactJS Query

Ahora que sabes cómo instalar y configurar ReactJS Query, veamos cómo crear y usar consultas con ReactJS Query. Las consultas son el concepto central de ReactJS Query, y son la principal forma de obtener y mostrar datos de las APIs.

Como vimos en la sección anterior, puedes usar el hook useQuery para crear y usar consultas en tus componentes React. El hook useQuery toma dos argumentos: una clave de consulta y una función de consulta. La clave de consulta es un identificador único para tu consulta, y la función de consulta es una función que obtiene datos de un punto final de la API y devuelve una promesa.

El hook useQuery devuelve un objeto que contiene las siguientes propiedades:

data: Los datos que se obtienen del punto final de la API. Es undefined cuando la consulta se está cargando o tiene un error.
status: El estado de la consulta. Puede ser uno de los siguientes valores: 'idle', 'loading', 'error' o 'success'.
error: El error que lanza la función de consulta. Es undefined cuando la consulta se está cargando o tiene un éxito.
isIdle: Un booleano que indica si la consulta está inactiva. Es true cuando la consulta no está habilitada o aún no ha comenzado a obtener datos.
isLoading: Un booleano que indica si la consulta se está cargando. Es true cuando la consulta está obteniendo datos del punto final de la API.
isError: Un booleano que indica si la consulta tiene un error. Es true cuando la función de consulta lanza un error o rechaza la promesa.
isSuccess: Un booleano que indica si la consulta tiene un éxito. Es true cuando la función de consulta resuelve la promesa y devuelve los datos.

Cómo obtener datos con ReactJS Query

La característica principal de ReactJS Query es la obtención de datos con consultas. Las consultas son funciones que obtienen datos de una API o de cualquier otra fuente. ReactJS Query te proporciona un hook personalizado llamado useQuery, que te permite usar consultas en tus componentes.

El hook useQuery toma dos argumentos: una clave de consulta y una función de consulta. La clave de consulta es un identificador único para tu consulta, que puede ser una cadena o un array. La función de consulta es una función que devuelve una promesa que se resuelve con los datos que quieres obtener.

Por ejemplo, digamos que quieres obtener una lista de publicaciones de una API falsa usando ReactJS Query. Puedes crear una función de consulta que use la API fetch para obtener los datos:

// Define una función de consulta que obtiene publicaciones
const fetchPosts = async () => {
  // Usa la API fetch para obtener los datos
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  // Analiza la respuesta como JSON
  const data = await response.json()
  // Devuelve los datos
  return data
}

Luego, puedes usar el hook useQuery en tu componente, pasando la clave de consulta 'posts' y la función de consulta fetchPosts:

// Usa el hook useQuery para obtener publicaciones
const { data, isLoading, isError, error } = useQuery('posts', fetchPosts)

El hook useQuery devuelve un objeto con varias propiedades que puedes usar para acceder y manipular los datos. Las más importantes son:

data: Los datos devueltos por la función de consulta, o undefined si la consulta se está cargando o tiene un error.
isLoading: Un booleano que indica si la consulta se está cargando o no.
isError: Un booleano que indica si la consulta tiene un error o no.
error: El objeto de error devuelto por la función de consulta, o undefined si la consulta se está cargando o no tiene ningún error.

Puedes usar estas propiedades para renderizar tu componente en función del estado de la consulta. Por ejemplo, puedes mostrar un spinner de carga mientras la consulta se está cargando, un mensaje de error si la consulta tiene un error o una lista de publicaciones si la consulta es exitosa:

// Renderiza el componente en función del estado de la consulta
return (
  <div>
    {isLoading && <div>Cargando...</div>}
    {isError && <div>Error: {error.message}</div>}
    {data && (
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    )}
  </div>
)

Así es como se obtienen datos con ReactJS Query. ReactJS Query almacenará automáticamente los datos en caché por ti y los volverá a obtener cuando el componente se monte, se desmonte o la clave de consulta cambie. También puedes personalizar el comportamiento de la consulta usando varias opciones, como staleTime, refetchOnWindowFocus, retry y más. Puedes encontrar la lista completa de opciones y sus descripciones en la documentación de ReactJS Query.

Cómo usar Apidog para generar código de cliente ReactJS Query

Apidog es una plataforma basada en la web que te ayuda a descubrir, probar e integrar APIs web con facilidad. Una de las características que ofrece Apidog es la capacidad de generar código de cliente Fetch con un solo clic, basándose en la especificación de la API que proporciones o selecciones.

button

Haz clic en el botón "Nueva API" en el panel de control o selecciona una API existente de la lista.

Haz clic en "Generar código de cliente". Apidog usará el motor OpenAPI Generator para generar el código de cliente Fetch para tu API, haciendo coincidir los puntos finales y las estructuras de datos que definiste o seleccionaste.

Verás una ventana modal con el código generado, que puedes copiar al portapapeles.

Puedes usar el código generado en tu propio proyecto o modificarlo como desees. También puedes probar el código con el servidor mock de Apidog, que simula las respuestas de la API basándose en tu especificación.

Conclusión

ReactJS Query es una biblioteca potente y versátil que puede hacer que nuestra experiencia de obtención de datos sea mucho más fácil y mejor. Puede funcionar con cualquier punto final de la API que devuelva datos JSON y puede integrarse con cualquier componente o biblioteca de React.

En esta entrada de blog, hemos aprendido a usar ReactJS Query para obtener datos de las APIs y mostrarlos en nuestro sitio web. Hemos visto cómo ReactJS Query simplifica la obtención y el almacenamiento en caché de datos para las aplicaciones React, y cómo generar código ReactJS Query Apidog. ¡Gracias por leer y feliz codificación!

button