Como fusionar TanStack-Query y Supabase y mejorar productividad

Se trata de una libereria JavaScript para la gestión de estados en el lado servidor dotando así de las herramientas necesarias y muy sencillas para saber el estado de cada una de las peticiones que se hagan. La ventaja principal es que la librería se encarga de dichas peticiones de forma automática y te puedes olvidar de tener que estar gestionando el estado de cada una de las respuestas, coordinando únicamente cuando quieres hacerlas y recoger los resultados cuando te sea necesario.

Al principio puede resultar un tanto complejo entender como gestionar la librería y las peticiones, pero una vez que te pones manos a la obra, te das cuenta que es bastante sencillo.

Una vez instalado siguiendo las instrucciones correspondientes en su web, en mi caso he creado unos hooks que facilitan la vida en las peticiones sin tener que estar haciendo el mismo código continuamente.

A continuación se puede ver un ejemplo del código implementado en proyectos basado en NextJS.

Primero se crearía un hook, en este caso ubicado en el directorio /utils/hooks/index.js

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

//Ignoring the supabase functions in this code

const getDashboardById = async (dashboardId) => {
  const res = await supabase.from("dashboards").select("title, color, description").eq("id", dashboardId).single();
  return res;
};

function useDashboard(dashboardId) {
  return useQuery({
    queryKey: ["dashboard", dashboardId],
    queryFn: () => {
      getDashboardById(dashboardId);
    },
    enabled: !!dashboardId,
  });
}

Este código se ejecuta llamando a la función useDashboard con la variable dashboardId asociada. ¿Cómo funciona? Retorna la función directamente useQuery que a su vez tiene la siguiente composición:

• queryKey. Se trata de un ID y de la variable que queramos enviar. [Documentación]
• queryFn. Llama a la función definida en la parte superior llamada getDashboardById. Por simplicidad, se podría poner el código directamente. [Documentación]
• enabled. Solo se llamará a queryFn si la variable dashboardId contiene información.

En las páginas del proyecto, se podrá hacer la llamada a este hook en cualquier momento. Cabe recordar que se trata de una librería que funciona perfectamente en el lado cliente.

import { useDashboards } from "../../utils/hooks";

export default function DashboardCard({ dashboards }) {

// ...

const dashboardId='1234-1234-1234'
const { data, isFetched, status } = useDashboards(dashboardId);

return (...)
}

Con esta librería podremos llamar mediante TanStak-Query a Supabase usando las ventajas que nos ofrece. Esta información está disponible en su web, pero a grandes rasgos lo resumiría en estos tres puntos.

• No se realizarán dobles llamadas a la base de datos.
• Se simplifica la gestión de dichas llamadas y el código es reutilizable.
• Es más sencillo el uso de los estados y condiciones de carrera: status, isFetching, etc.