Tanstack Query, también conocido como React Query, es una biblioteca popular para obtener datos en aplicaciones React. React Query simplifica el proceso de obtención, almacenamiento en caché y actualización de datos en aplicaciones web. Este artículo discutirá el uso de React Query para manejar la obtención de datos en una aplicación React.

Instalación y configuración de React Query

Puede instalar React Query usando npm o yarn. Para instalarlo usando npm, ejecute el siguiente comando en su terminal:

npm i @tanstack/reaccionar-consulta

Para instalarlo usando yarn, ejecuta el siguiente comando en tu terminal:

añadir hilo @tanstack/react-query

Después de instalar la biblioteca React Query, envuelve toda la aplicación en el QueryClientProvider componente. El QueryClientProvider componente envuelve toda su aplicación y proporciona una instancia de la QueryClient a todos sus componentes secundarios.

El QueryClient es la pieza central de React Query. El QueryClient gestiona toda la lógica de obtención y almacenamiento en caché de datos. El QueryClientProvider componente toma el QueryClient como accesorio y lo pone a disposición del resto de su aplicación.

Para hacer uso de la QueryClientProvider y el QueryClient en su aplicación, debe importarlos desde el @tanstack/reaccionar-consulta biblioteca:

importar Reaccionar de'reaccionar';
importar ReactDOM de'reaccionar-dom/cliente';
importar aplicación de'./Aplicación';
importar { ProveedorClienteConsulta, ClienteConsulta } de'@tanstack/reaccionar-consulta';
constante consultaCliente = nuevo ConsultaCliente();
ReactDOM.createRoot(documento.getEementd('raíz')).prestar(



 </QueryClientProvider>
 </React.StrictMode>
)

Comprensión del gancho useQuery

El useQuery hook es una función proporcionada por la biblioteca React Query, que obtiene datos de un servidor o API. Acepta un objeto con las siguientes propiedades: clave de consulta (la clave de la consulta) y consultaFn (una función que devuelve una promesa que se resuelve en los datos que desea obtener).

El clave de consulta identifica la consulta; debe ser único para cada consulta en su aplicación. La clave puede ser cualquier valor, como una cadena, un objeto o una matriz.

Para obtener datos usando el useQuery hook, necesitas importarlo desde el @tanstack/reaccionar-consulta biblioteca, pasar un clave de consulta y usa el consultaFn para obtener los datos de una API.

Por ejemplo:

importar Reaccionar de'reaccionar';
importar axios de'axíos';
importar { usar consulta } de'@tanstack/reaccionar-consulta';
funciónHogar() {
constante postConsulta = useQuery({
 clave de consulta: ['publicaciones'],
 consultaFn: asíncrono () => {
constante respuesta = esperar axios.get(' https://jsonplaceholder.typicode.com/posts');
constante datos = esperar respuesta.datos;
devolver datos;
 }
 })
si(postQuery.isLoading) devolver ( <h1>Cargando...h1>)
si(postQuery.isError) devolver (<h1>Error al cargar datos!!!h1>)

devolver (



Inicio</h1>
 { postConsulta.datos.mapa( (artículo) => ( <pagllave={Identificación del artículo}>{elemento.título}pag>)) }
 </div>
 )
}
exportarpor defecto Hogar;

El useQuery hook devuelve un objeto que contiene información sobre la consulta. El Publicar consulta objeto contiene el esta cargando, esError, y eséxito estados El esta cargando, esError, y eséxito Los estados gestionan el ciclo de vida del proceso de recuperación de datos. El postQuery.data La propiedad contiene los datos obtenidos de la API.

El esta cargando state es un valor booleano que indica si la consulta está cargando datos actualmente. Cuando el esta cargando El estado es verdadero, la consulta está en curso y los datos solicitados no están disponibles.

El esError state también es un valor booleano que indica si se produjo un error durante la recuperación de datos. Cuando esError es verdadero, la consulta no ha podido recuperar los datos.

El eséxito state es un valor booleano que indica si la consulta ha recuperado datos correctamente. Cuando eséxito es cierto, puede mostrar los datos recuperados en su aplicación.

Tenga en cuenta que puede acceder a la clave de consulta utilizando el consultaFn. El consultaFn toma un solo argumento. Este argumento es un objeto que contiene los parámetros necesarios para la solicitud de la API. Uno de estos parámetros es el clave de consulta.

Por ejemplo:

usarConsulta({
 clave de consulta: ['publicaciones'],
 consultaFn: asíncrono (obj) => {
consola.log( obj.queryKey );
 }
 })

Tratar con datos obsoletos

React query proporciona muchas formas de lidiar con datos obsoletos. La biblioteca React Query se asegura de realizar automáticamente una nueva solicitud de recuperación a su API cuando los datos obtenidos se vuelven obsoletos. Esto garantiza que continuamente esté procesando los datos más actualizados.

Puede controlar la rapidez con la que sus datos se vuelven obsoletos y el intervalo de tiempo entre cada solicitud de recuperación automática utilizando el staleTime y refetchInterval opciones El staleTime La opción es una propiedad que especifica el número de milisegundos que los datos almacenados en caché son válidos antes de volverse obsoletos.

El refetchInterval La opción es una propiedad que especifica la cantidad de milisegundos entre cada solicitud de recuperación automática de la biblioteca React Query.

Por ejemplo:

usarConsulta({
 clave de consulta: ['...'],
 consultaFn: () => {...},
 staleTime: 1000;
})

En este ejemplo, el staleTime es 1000 milisegundos (1 segundo). Los datos obtenidos quedarán obsoletos después de 1 segundo, y luego la biblioteca React Query realizará otra solicitud de recuperación a la API.

Aquí usas el refetchInterval opción para controlar el intervalo de tiempo entre cada solicitud de recuperación automática:

usarConsulta({
 clave de consulta: ['...'],
 consultaFn: () => {...},
 intervalo de recuperación: 6000;
})

El refetchInterval es 6000 milisegundos (6 segundos). React Query activará automáticamente una nueva solicitud de recuperación para actualizar los datos almacenados en caché después de 6 segundos.

Entendiendo el usoMutation Hook

El usoMutación hook es una herramienta poderosa en la biblioteca React Query. Él realiza una operación asíncrona mutaciones, como crear o actualizar datos en un servidor. Utilizando el usoMutación hook, puede actualizar fácilmente el estado de su aplicación y la interfaz de usuario en función de la respuesta de la mutación.

A continuación, hemos creado un Agregar publicación componente que hace un formulario con un campo de entrada y un botón de envío. Este componente de formulario utilizará el gancho useMutation para actualizar el estado:

importar Reaccionar de'reaccionar'
funciónAgregar publicación() {
constante[publicar, establecer Publicar] = React.useState({
 título: ""
 })
funciónmanejarCambiar(evento) {
 establecerPublicar( (estado anterior) => ({
 ...estado anterior,
 [evento.objetivo.nombre]: evento.objetivo.valor
 }) )
 }
devolver (



 tipo ="texto"
 marcador de posición ='Añadir título'
 nombre='título'
 onChange={manejarCambio} 
 valor={publicación.título}
 />
Añadir publicación</button>
 </form>
 )
}
exportarpor defecto Añadir Publicación;

Dentro de Agregar publicación componente es un estado correo que sirve como un objeto con una propiedad, título.

El manejarCambiar la función actualiza el estado correo cada vez que los usuarios escriben en los campos de entrada. Después de crear el Agregar publicación componente, importamos el usoMutación hook y utilícelo para actualizar la API.

Por ejemplo:

importar { usar Mutación } de'@tanstack/reaccionar-consulta'
importar axios de'axíos';
constante nuevaPostMutación = usarMutación({
 mutaciónFn: asíncrono () => {
constante respuesta = esperar axios.post('', {
 título: post.título,
 });
constante datos = respuesta.datos;
devolver datos;
 }
 })

El usoMutación hook maneja la solicitud HTTP para crear una nueva publicación. El nuevoPostMutación constante representa la función de mutación y sus opciones de configuración.

El mutaciónFn es una función asíncrona que envía una solicitud POST al extremo de la API. La solicitud incluye un objeto que contiene el título valor de la correo objeto.

para ejecutar el mutaciónFn, tendrá que llamar al nuevaPostMutación.mutar() método:

constante manejarEnviar = asíncrono (evento) => { 
 event.preventDefault();
 nuevaPostMutación.mutate();
}
devolver (


 tipo ="texto"
 marcador de posición ='Añadir título'
 nombre='título'
 onChange={manejarCambio} 
 valor={publicación.título}
 />
Añadir publicación</button>
 </form>
 )
}

Al enviar el formulario se ejecutará el manejarEnviar función. El manejarEnviar función es una función asíncrona que desencadena la función de mutación nuevaPostMutación.mutar().

Obtención eficiente de datos con Tanstack Query

Este artículo explora cómo manejar la obtención de datos en una aplicación React usando la biblioteca tanstack/react-query.

La biblioteca tanstack/react-query proporciona una herramienta poderosa y flexible para obtener y almacenar datos en caché en aplicaciones React. Es fácil de usar y sus capacidades de almacenamiento en caché lo hacen eficiente y receptivo.

Ya sea que esté creando un pequeño proyecto personal o una aplicación empresarial extensa, la biblioteca tanstack/react-query puede ayudarlo a administrar y mostrar datos de manera efectiva y eficiente. Junto con React, Next.js también proporciona varios procesos integrados y bibliotecas de terceros para manejar la obtención de datos.