Cómo manejar la recuperación de datos en React.js usando la consulta Tanstack

Tanstack Query, también conocido como React Query, es una biblioteca popular para recuperar 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 recuperació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/react-query
 

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

 yarn add @tanstack/react-query
 

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

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

Usar el QueryClientProvider y el QueryClient en su aplicación, necesita importarlos desde el archivo @tanstack/reaccionar-consulta biblioteca:

 import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getEementd('root')).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
)
 

Comprender el enlace useQuery

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

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

Para recuperar datos usando el useQuery gancho, tienes que importarlo desde el archivo @tanstack/reaccionar-consulta biblioteca, cambiar a clave de consulta y usa el consultaFn para recuperar datos de una API.

Por ejemplo:

 import React from 'react';
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
function Home() {
  const postQuery = useQuery({
    queryKey: ['posts'],
    queryFn: async () => {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      const data = await response.data;
      return data;
    }
  })
  if( postQuery.isLoading ) return ( <h1>Loading....</h1>)
  if( postQuery.isError ) return (<h1>Error loading data!!!</h1>)
  
  return (
    <div>
      <h1>Home</h1>
      { postQuery.data.map( (item) => ( <p key={item.id}>{item.title}</p>)) }
    </div>
  )
}
export default Home;
 

EL useQuery hook devuelve un objeto que contiene información sobre la consulta. EL Publicar consulta objeto contiene el esta cargando, esErrorY eséxito estados EL esta cargando, esErrorY eséxito Los estados administran el ciclo de vida del proceso de recuperación de datos. EL postQuery.data La propiedad contiene los datos recuperados 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 al obtener los datos. Cuando esError sí, la consulta no pudo obtener los datos.

EL eséxito state es un valor booleano que indica si la consulta obtuvo correctamente los datos. Cuando eséxito eso es cierto, puede ver los datos recuperados en su aplicación.

Tenga en cuenta que puede iniciar sesión en clave de consulta utilizando el consultaFn. EL consultaFn aceptar 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:

 useQuery({
    queryKey: ['posts'],
    queryFn: async (obj) => {
      console.log( obj.queryKey );
    }
  })
 

Gestión de datos obsoletos

La consulta React ofrece 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 se devuelvan continuamente los datos más actualizados.

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

EL intervalo de recuperación 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:

 useQuery({
  queryKey: ['...'],
  queryFn: () => {...},
  staleTime: 1000;
})
 

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

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

 useQuery({
  queryKey: ['...'],
  queryFn: () => {...},
  refetchInterval: 6000;
})
 

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

Entender el gancho useMutation

EL usar mutación hook es una herramienta poderosa en la biblioteca React Query. Realizar mutaciones de operaciones asincrónicas, como crear o actualizar datos en un servidor. Utilizando el usar mutación gancho, puede actualizar fácilmente el estado de la aplicación y la interfaz de usuario en función de la respuesta de mutación.

A continuación, creamos un archivo Agregar publicación componente que representa un formulario con un campo de entrada y un botón de envío. Este componente del módulo utilizará el gancho useMutation para actualizar el estado:

 import React from 'react'
function AddPost() {
    const[post, setPost] = React.useState({
        title: ""
    })
    function handleChange(event) {
        setPost( (prevState) => ({
            ...prevState,
            [event.target.name]: event.target.value
        }) )
    }
  return (
    <form onSubmit={handleSubmit}>
      <input 
type="text" 
placeholder='Add Title' 
name='title' 
onChange={handleChange} 
value={post.title}
/>
      <button>Add Post</button>
    </form>
  )
}
export default AddPost;
 

Dentro de Agregar publicación componente es un estado enviar que actúa como un objeto con una propiedad, título.

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

Por ejemplo:

 import { useMutation } from '@tanstack/react-query'
import axios from 'axios';
const newPostMutation = useMutation({
    mutationFn: async () => {
      const response = await axios.post('<https://jsonplaceholder.typicode.com/posts>', {
        title: post.title,
      });
      const data = response.data;
      return data;
    }
 })
 

EL usar mutació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 punto final de la API. La solicitud incluye un objeto que contiene el archivo. título valor de enviar objeto.

para ejecutar el mutaciónFntendrás que llamar al nuevaPostMutación.mutar() método:

 const handleSubmit = async (event) => { 
  event.preventDefault();
  newPostMutation.mutate();
}
return (
    <form onSubmit={handleSubmit}>
      <input 
type="text" 
placeholder='Add Title' 
name='title' 
onChange={handleChange} 
value={post.title}
/>
      <button>Add Post</button>
    </form>
  )
}
 

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

Recuperación eficiente de datos con consulta Tanstack

Este artículo explora cómo manejar la recuperació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 recuperar 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 gran aplicación empresarial, la biblioteca tanstack/react-query puede ayudarlo a administrar y visualizar datos de manera efectiva y eficiente. Junto con React, Next.js también proporciona varios procesos integrados y bibliotecas de terceros para gestionar la recuperación de datos.