Instalación y uso de TanStack Query (antes React Query)

Introducción

TanStack Query (anteriormente conocido como React Query) es una biblioteca para gestionar el estado de las solicitudes de datos en aplicaciones de React. Permite realizar fetching, caching, sincronización y actualización de datos de manera eficiente.

Instalación

Para comenzar a usar TanStack Query en un proyecto de React, primero debes instalar la biblioteca:

npm install @tanstack/react-query

O si usas Yarn:

yarn add @tanstack/react-query

Adicionalmente, si deseas utilizar DevTools para depurar, instala:

npm install @tanstack/react-query-devtools

Configuración

Una vez instalada la biblioteca, debes envolver tu aplicación con QueryClientProvider, que proporciona un contexto para manejar las solicitudes de datos.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

Si instalaste DevTools, agrégalas dentro de QueryClientProvider:

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

<QueryClientProvider client={queryClient}>
  <MyComponent />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

Uso básico

El hook useQueryse usa para obtener datos de una API de forma eficiente.

import { useQuery } from '@tanstack/react-query';

function fetchData() {
  return fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json());
}

function MyComponent() {
  const { data, isLoading, error } = useQuery({ queryKey: ['post'], queryFn: fetchData });

  if (isLoading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <div><h1>{data.title}</h1><p>{data.body}</p></div>;
}

Mutaciones

Para realizar mutaciones (POST, PUT, DELETE), usa useMutation.

import { useMutation } from '@tanstack/react-query';

function createPost(newPost) {
  return fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newPost),
  }).then(response => response.json());
}

function CreatePost() {
  const mutation = useMutation(createPost);

  return (
    <button
      onClick={() => mutation.mutate({ title: 'Nuevo Post', body: 'Contenido del post' })}
    >
      Crear Post
    </button>
  );
}

Por qué TanStack Query necesita un fetcher?

TanStack Query es una librería de JavaScript altamente popular que simplifica la gestión de datos en aplicaciones front-end. Para poder obtener datos de una API o cualquier otra fuente externa, necesita una forma de "traer" esos datos. Ahí es donde entra el fetcher.

Fetcher como puente: El fetcher actúa como un puente entre tu aplicación y la fuente de datos. Es la función que se encarga de realizar la petición HTTP (o cualquier otro tipo de petición necesaria) y de obtener la respuesta.
Flexibilidad: TanStack Query te permite definir fetchers personalizados para adaptarlos a las necesidades específicas de tu aplicación y a las características de tu API. Esto te da un gran control sobre cómo se obtienen los datos.
Abstracción: Al separar la lógica de obtención de datos en un fetcher, mantienes tu componente limpio y enfocado en la presentación de los datos.

¿Qué es un fetcher?

En términos simples, un fetcher es una función que:

Recibe parámetros: Estos parámetros pueden incluir variables, opciones de la petición, etc.

Realiza una petición: Utiliza una librería como fetch, axios o cualquier otra para hacer la solicitud a la API.

Retorna un valor: Este valor suele ser una promesa que se resuelve con los datos obtenidos de la API, o se rechaza si ocurre algún error.

const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  const json = await response.json();
  console.log(json);
  return json; 
};

Conclusión

TanStack Query facilita la gestión de datos en aplicaciones React, mejorando la eficiencia en la obtención y actualización de información desde APIs. Su sistema de caching y revalidación automática optimiza el rendimiento, reduciendo peticiones innecesarias.

Nos leemos pronto!!! 🚀