¿Qué es React Query y para qué usarlo? Mi librería favorita en mucho tiempo

Definición general de React Query

Básicamente es una librería complementaria a React o React Native que facilita el trabajo a la hora de realizar peticiones desde el lado del cliente hacia el servidor. Parecido a SWR o incluso Apollo
Está implementado de tal forma que guarda por si mismo una copia en memoria de los datos pedidos, liberando al programador de esta tarea. Por otra parte, obviamente, permite sincronizar, actualizar y borrar los datos.
Pero, ¿qué es lo más divertido e interesante de esta librería? Que se puede usar como un hook normal o un hook personalizado de React!

Instalación y Uso

• Instalarlo es tan fácil como ejecutar dentro de nuestro proyecto el comando que más nos convenga de los siguientes:

$ npm i react-query
# o
$ yarn add react-query

• Caso de uso simple :

import React, { memo } from'react'
import { useQuery } from'react-query'
import { findData } from'services'
...

const List = ( ) => {
  const { data, error, isFetching, status } = useQuery('listData', () => findData, {
    refetchOnWindowFocus: false
  })

  if (error) {
    console.error('Error fetching in create form:', error.message)
    return (
      'No se ha podido cargar...' />
    )
  }

 
  if (isFetching)
    return (
      <Backdrop>
        <CircularProgress color='secondary' />
      </Backdrop>
    )

  return (
	<CualquierOtroComponente/>
  )
}

export default memo(Create)

Como se puede observar, se simplifica enormemente la escritura de código ya que para un caso de uso simple como el de listar datos, y por ejemplo visualizarlos en una tabla, el tener a primer nivel variables de las que poder apoyarte y renderizar un componente u otro hace que tu código se vea mucho más limpio y organizado. Piensa en que para este caso podrías haber escrito un reducer con una gran serie de funciones (dispatch) para cada uno de los pasos a seguir durante la ejecución de la función findData.
Como ya se ha comentado antes no solo facilita la escritura de código si no que también hace que nuestro proyecto funcione mucho más rápido gracias a que guarda en memoria una copia de los datos pedidos. La key listData es usada para mantener en memoria los datos y así poder tirar de esos datos hasta que una segunda se realice, ejecutándose internamente una comparación de los datos en memoria con los datos recibidos, si son iguales ya se ha renderizado una versión correcta en caso contrario se usan los nuevos datos 😃
Además, se puede observar el uso de opciones para ejecutar el hook useQuery. En este caso se utiliza la opción refetchOnWindowFocus a false para indicar que no se vuelva a repetir la petición cada vez que la pestaña del navegador tenga el “foco de atención”, por defecto está a true.

											💪💪💪💪💪💪 Interesante, ¿verdad? 💪💪💪💪💪💪

Esto solo ha sido una de las muchas aplicaciones o escenarios en que se puede usar react-query. Por supuesto se puede usar para cada una de las acciones de un CRUD.

A continuación os dejo un enlace a un ejemplo de custom hook y así podéis “bichear” vosotros con la librería!

Espero que os guste mi aporte y le déis una oportunidad a la librería.