React query, hook personalizado.

En aplicaciones de React, es común necesitar acceder a datos de una API externa. Tradicionalmente, muchos desarrolladores utilizan métodos nativos de javascript como fetch dentro de los componentes, lo que puede llevar a problemas de administración del estado y a un manejo complicado de efectos secundarios (side effects). Aquí es donde React Query entra en juego.

¿Qué es React Query?

React Query es una biblioteca destinada a simplificar las operaciones de obtención y manejo de datos en React. Proporciona potentes funciones para:

Efectuar solicitudes de datos de una API.
Almacenar y sincronizar el estado de la UI con los datos.
Realizar refetching automáticamente y gestionar cachés.
Nuestro Hook Personalizado

A continuación, veamos nuestro hook personalizado, useCustomQuery:

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

export type GenericObject = {
  [key: string]: any;
};

export type QueryFunction = (
  url: string,
  token?: string,
) => Promise<GenericObject>;

export const useCustomQuery = (
  queryFunction: QueryFunction,
  url: string,
  queryKey: string[],
  token?: string,
) => {
  const { isPending, isError, data, error, refetch, isLoading } = useQuery<
    GenericObject | GenericObject[]
  >({
    queryKey: [queryKey],
    queryFn: () => queryFunction(url, token),
  });

  return { data, error, isError, isPending, refetch, isLoading };
};

Desglose del Hook

GenericObject y QueryFunction:

Definimos tipos genéricos que facilitan el trabajo con objetos y funciones que realizan fetching de datos. Esto asegura que nuestro código pueda adaptarse a diferentes estructuras de datos que puedan regresar las APIs.

useQuery:

Usamos el hook useQuery de React Query, que maneja automáticamente el estado de nuestras solicitudes. Proporciona propiedades útiles para manejar la carga de datos, errores y refetching.

Esto mejora la calidad del código y reduce bugs.
Interfaces Genéricas: Utilizando interfaces genéricas, podemos definir estructuras de datos que se adaptan a diferentes situaciones. Esto hace que el código sea más reutilizable y fácil de mantener.
Mejor Documentación: El uso de TypeScript como una herramienta de documentación proporcionada por los tipos mejora la comprensión de cómo se deben usar las funciones y qué tipo de datos se esperan.

Enlaces Útiles

1. React Query:

   • Documentación oficial: TanStack Query Documentation
   • Guía de inicio rápido: Getting Started with React Query

2. TypeScript:

   • Documentación oficial: TypeScript Documentation
   • Guía de TypeScript para React: Using TypeScript with React

3. GitHub de React Query:

   • Repositorio oficial: TanStack Query (React Query) GitHub

4. Ejemplos y Tutoriales:

   • Tutorial de RapidAPI sobre React Query: Getting Started with React Query
   • Artículo sobre los beneficios de utilizar React Query: Benefits of Using React Query

Conclusión

Integrar un hook personalizado junto con React Query y TypeScript en tus aplicaciones React transforma la forma en que gestionas las solicitudes de datos. No sólo mejora la experiencia de desarrollo al reducir la carga de lógica de manejo de estado, sino que también enriquece la robustez y facilidad de mantenimiento de tu código.
Espero que encuentren útil este enfoque y les animo a probarlo en sus propios proyectos. ¡Feliz codificación!